Question

我有iframe没有src属性。我从JavaScript端设置了HTML。

问题是如果我加载包含$("body").html()的脚本，它会返回父文档的body html，而我希望得到iframe的body html。

我该如何避免这种行为？

我使用

设置iframe HTML

$(".myResult").contents().find("html").html(myHtmlToLoad);

这是JSFIDDLE，我在那里重现了这个问题。我期望textarea值返回调用$(body).html()（在iframe内），但它返回整个页面的HTML（包含iframe）。

Answer 1

var ifrm = $(".result:first")[0]; 
ifrm.contentDocument.body.textContent = ""; 
var htmlDocumentStr = $(".html").val(); 
ifrm.contentDocument.write(htmlDocumentStr);

Answer 2

如果我理解你的问题，你想获得iframe的html。你在找这个吗？

var $iframe = $(".myResult");
console.log($('body', $iframe.contents());

您还可以使用myIframe.contentDocument

获取对iframe DOM的引用

Answer 3

使用html(myHtmlToLoad)，您没有写入iframe文档;您将子元素附加到元素，但仍在父元素上。

请参阅this answer，了解如何访问iframes文档。

Answer 4

这里的主要问题似乎是你从父页面使用jQuery的东西，这个是对象而不是一个类，它被分配到当前页面并仅使用它的正文

由于你在iframe中，jQuery仍然被分配给父文档。

您的解决方案应该是将jQuery加载到“iframe”，可能使用.noConflict（）模式，并在iframe的JavaScript中使用它。

例如：

<script ...> // attach new jQuery to iframe

var $$ = jQuery.noConflict(); // make new object for iframe

$$("body")... // use

希望这有帮助。

如何避免没有src的iframe读取它的父HTML？

4 个答案: