Javascript 如何在iFrame中包装HTML？_Javascript_Html_Iframe

Javascript 如何在iFrame中包装HTML？

javascript html iframe

Javascript 如何在iFrame中包装HTML？,javascript,html,iframe,Javascript,Html,Iframe,我对iFrames很陌生我有一个简单的HTML，我想用iFrames包装它。HTML如下所示 <!DOCTYPE html> <html> <head> <script> function copyText() { alert('It is clicked'); } </script> </head> <body> Field1: <input type="text" id="field1" value

我对iFrames很陌生

我有一个简单的HTML，我想用iFrames包装它。HTML如下所示

<!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>


函数copyText（）
{
警报（“已单击”）；
}
字段1:

字段2：



复制文本

请帮助了解如何使用iFrames包装它

谢谢

Gendaful

我永远不会在我自己的代码中执行以下操作，但由于

可以使用数据URI，因此下面可能是一个解决方案

您的代码将创建一个字符串

%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

然后将其转换为并在

上设置为src，然后附加到文档中。
我在下面转义引号

”

，因为我使用的是字符串文字

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

可能会有帮助。@Teemu我从来不会在自己的代码中这样做。@ryan此类代码的最大用途是XSS。第二大用途是。。某种形式的现场文档写作？但它背后的前提并不难理解；有一些数据，保存到文件，在iframe中打开文件-但是使用它是一个数据URI这一事实来跳过“保存”步骤。当我有一个不友好的脚本使用document.write函数时，我发现这个古老而丑陋的解决方案实际上很有用。因为我无法更改脚本，必须以特定的方式对其进行测试，并且因为无法从脚本内外调用document.write，所以我将脚本标记写入了类似这样的IFrame中。这表明即使是最奇怪的答案也可能有一天会有所帮助。谢谢