jQuery添加带有内容的iFrame

Question

我有一个问题。 我需要在fancybox中打开iframe(我需要iframe是因为我需要浏览打开文档中的链接并停留在fancybox中), 但我想从变量中将内容放入iframe，而不是通过src属性(我已经通过AJAX获取了内容(在将其放入iframe之前需要对内容进行一些检查，所以无法使用除AJAX查询之外的其他方法)，所以我不需要再进行一次查询)。

Fancybox不允许在'type':'iframe'的情况下使用'content'属性。因此，我决定动态创建iframe，将我的内容插入其中，并通过fancybox显示iframe作为常规块。

就像这样:

jQuery('<iframe id="someId"/>').appendTo('body').contents().find('body').append(content);

然后

jQuery('<iframe id="someId"/>').fancybox();

但第一部分不起作用。我可以看到添加到页面的iframe，但没有任何内容（我在变量content中有完整的HTML页面，但当我尝试仅附加一些文本时，它也不起作用）。

我做错了什么？

也许有另一种方法可以做到我需要的？

- krasilich

---

遇到了同样的问题，能否请您告诉我是否解决了上述问题@krasilich - Anil kumar

Answer 1

您的问题将在像这样调用jQuery的ready方法后得到解决

<script type="text/javascript">
$(function(){
$('<iframe id="someId"/>').appendTo('body');
$('#someId').contents().find('body').append('<b>hello sajjad</b>');
});
</script>

<iframe id="someId"></iframe>

- sajjad hussain

---

相关链接：https://dev59.com/inI-5IYBdhLWcg3w99kH - Jaider

Answer 2

如果将那行代码分成两部分会发生什么：

jQuery('<iframe id="someId"/>').appendTo('body');
jQuery('#someId').contents().find('body').append(content);

在进行操作之前，请确保您的选择器正确。之前的操作是创建一个新的 iframe，而不是将其插入到 DOM 中并调用 fancybox，然而下面的操作应该可以正常工作：

jQuery('#someId').fancybox();

- Marcus Whybrow

---

我可以看到我的页面底部有一个空的iframe。我放置了简单文本内容（var content ='Iframe中的文本'）。并且在firebug中没有错误。iFrame中的body元素为空。 - krasilich

var content = 'iframe中的文本'; jQuery('<iframe id="someId"/>').appendTo('body') jQuery('#someId').contents().find('body').append(content); jQuery('#someId').fancybox(); 这是我在Firebug控制台中运行的。 - krasilich

这就是发生的事情：http://img232.imageshack.us/f/screenshotylj.png/ 因此，jQuery可以正常工作，因为它创建了一个iframe并将其附加到body上。但是，iframe的主体仍然没有内容。 - krasilich

但是 jQuery('#someId').contents().find('body') 返回一个元素。 - krasilich

好的，那我就没有更多的想法了。这可能是另一个隐藏的问题，或者我可能弄错了什么。如果我是你，我会创建一个简化的测试用例，看看那里会发生什么。 - Marcus Whybrow

Answer 3

这个问题的时间已经过去了，但是这里有另一个解决方案：

var ifrm = document.createElement("iframe");
document.body.appendChild(ifrm);
ifrm.id = "someId"; // optional id
ifrm.onload = function() {
    // optional onload behaviour
}
setTimeout(function() {
    $(ifrm).contents().find("body").html(content);
}, 1);

- Igor Parra