0

I am very new to iFrames.

I have a simple HTML and I want to wrap it in iFrames.HTML is as below.

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
alert('It is clicked');
}
</script>
</head>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2">
<br><br>
<button onclick="copyText()">Copy Text</button>

</body>
</html>

Please help on how to wrap it using iFrames.

Thanks Gendaful

Gendaful
  • 5,522
  • 11
  • 57
  • 76
  • 4
    [MDN ` – Teemu Mar 11 '13 at 17:39
  • [Write elements into a child iframe using Javascript or jQuery](http://stackoverflow.com/questions/997986/write-elements-into-a-child-iframe-using-javascript-or-jquery) – Antony Mar 11 '13 at 17:41

1 Answers1

2

I would never do the following in my own code, but as an <iframe> can use a data URI, the following could be a solution.

window.encodeURIComponent your code to create a string.

%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cscript%3E%0Afunction%20copyText()%0A%7B%0Aalert('It%20is%20clicked')%3B%0A%7D%0A%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0AField1%3A%20%3Cinput%20type%3D%22text%22%20id%3D%22field1%22%20value%3D%22Hello%20World!%22%3E%3Cbr%3E%0AField2%3A%20%3Cinput%20type%3D%22text%22%20id%3D%22field2%22%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbutton%20onclick%3D%22copyText()%22%3ECopy%20Text%3C%2Fbutton%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E

Then convert this to a data URI and set as src on your <iframe>, then append to document.
I escape quotes ' below as I'm using a string literal.

var ifrm = document.createElement('iframe'); // create
ifrm.src = 'data:text/html,' // convert to data URI, set src
    + '%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cscript%3E%0Afunction%20copyText()%0A%7B%0Aalert(\'It%20is%20clicked\')%3B%0A%7D%0A%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0AField1%3A%20%3Cinput%20type%3D%22text%22%20id%3D%22field1%22%20value%3D%22Hello%20World!%22%3E%3Cbr%3E%0AField2%3A%20%3Cinput%20type%3D%22text%22%20id%3D%22field2%22%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbutton%20onclick%3D%22copyText()%22%3ECopy%20Text%3C%2Fbutton%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E';
document.body.appendChild(ifrm); // append

Example fiddle

Paul S.
  • 64,864
  • 9
  • 122
  • 138
  • @Teemu I'd never do this in my own code. – Paul S. Mar 11 '13 at 17:48
  • @ryan biggest use of code like this is XSS. Second biggest use would be.. some form of live document writing? The premise behind it isn't so hard to follow though; have some data, save to file, open file in an iframe - but using the fact it is a data URI to skip the "save" step. – Paul S. Mar 11 '13 at 23:50
  • 2
    I found this old and ugly solution actually helpful and useful when I had an unfriendly script that was using the document.write function. Because I couldn't change the script and had to test it in a specific way, and because document.write can't be called from and outside script, I wrote the script tag into an IFrame like that. That shows that even the weirdest answers might be helpful one day. Thanks! – matan7890 Oct 20 '15 at 14:25