猿问

动态创建具有给定HTML的iframe

我正在尝试从JavaScript创建iframe并用任意HTML填充它，如下所示：


var html = '<body>Foo</body>';

var iframe = document.createElement('iframe');

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

我希望iframe然后包含一个有效的窗口和文档。但是，事实并非如此：


> console.log（iframe.contentWindow）; 

空值


自己尝试一下：http : //jsfiddle.net/TrevorBurnham/9k9Pe/


我在俯视什么？


神不在的星期二
浏览 654回答 3
3回答

慕妹3242003

尽管您src = encodeURI应该工作，但我会采取另一种方式：var iframe = document.createElement('iframe');var html = '<body>Foo</body>';document.body.appendChild(iframe);iframe.contentWindow.document.open();iframe.contentWindow.document.write(html);iframe.contentWindow.document.close();由于它没有x域限制，并且完全是通过iframe手柄完成的，因此您稍后可以访问和操作框架的内容。您需要确定的是，内容已呈现，这将在发出.write命令期间/之后（取决于浏览器类型）开始- 但在close()调用时不必完成。100％兼容的回调方法可以是这种方法：<html><body onload="parent.myCallbackFunc(this.window)"></body></html>但是，iframe具有onload事件。这是一种以DOM（js）形式访问内部html的方法：iframe.onload = function() {&nbsp; &nbsp;var div=iframe.contentWindow.document.getElementById('mydiv');};
0

大话西游666

感谢您提出的重大问题，这使我不知所措。使用dataURI HTML源时，我发现必须定义一个完整的HTML文档。参见下面的修改示例。var html = '<html><head></head><body>Foo</body></html>';var iframe = document.createElement('iframe');iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);注意用<html>标签和iframe.src字符串包装的html内容。需要将iframe元素添加到要解析的DOM树中。document.body.appendChild(iframe);iframe.contentDocument除非您disable-web-security在浏览器上，否则您将无法检查。您会收到一条消息DOMException：无法从“ HTMLIFrameElement”读取“ contentDocument”属性：阻止了源为“ http：// localhost：7357 ”的框架访问跨域框架。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答