首頁猿問動態創建具有給定HTML的iframe

動態創建具有給定HTML的iframe

JavaScript

神不在的星期二 2019-10-05 14:32:40

我正在嘗試從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/我在俯視什么？

查看完整描述

3 回答

慕妹3242003

TA貢獻1824條經驗獲得超6個贊

盡管您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％兼容的回調方法可以是這種方法：

但是，iframe具有onload事件。這是一種以DOM（js）形式訪問內部html的方法：

iframe.onload = function() {

var div=iframe.contentWindow.document.getElementById('mydiv');

};

反對回復 2019-10-05

大話西游666

TA貢獻1817條經驗獲得超14個贊

感謝您提出的重大問題，這使我不知所措。使用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 ”的框架訪問跨域框架。

反對回復 2019-10-05

3 回答
0 關注
721 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

動態創建具有給定HTML的iframe

動態創建具有給定HTML的iframe

3 回答

添加回答