jQuery添加带有内容的iFrame答案

【问题标题】：jQuery add iFrame with contentjQuery添加带有内容的iFrame
【发布时间】：2011-01-06 12:23:39
【问题描述】：

我有这样的问题。我需要在fancybox中打开iframe（我需要iframe，因为我需要浏览打开的文档中的链接并留在fancybox中），但我想将内容从变量放入 iframe，而不是通过 src 属性（我已经通过 AJAX 获得了内容（我需要在将内容放入 iframe 之前对内容进行一些检查，所以没有办法代替 AJAX查询），所以我不需要再查询）。

Fancybox 不允许将 'content' 属性与 'type':'iframe' 一起使用。所以我决定动态创建 iframe，将我的内容插入其中，并通过 fancybox 将 iframe 显示为常规块。

好像

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

然后

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

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

我做错了什么？

也许还有其他方法可以满足我的需要？

【问题讨论】：

遇到了同样的问题，请问您是否解决了上述问题@krasilich

标签： jquery iframe fancybox

【解决方案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>

【讨论】：

相关链接：stackoverflow.com/questions/1591135/…

【解决方案2】：

如果你把那条线一分为二会发生什么：

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

然后在创建新的 iframe 之前将选择器更改为正确的，而不是将其插入 DOM 并在其上调用 fancybox，但这应该可以：

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

【讨论】：

我可以在页面底部看到空的 iframe。我输入了内容简单的文本（var content = 'Text in Iframe'）。并且萤火虫没有错误。 iFrame 中的元素主体为空
@krasilich 你试过我建议的代码了吗？我用一个新发现编辑了我的答案。
var content = 'iframe 中的文本'; jQuery('').appendTo('body') jQuery('#someId').contents().find('body').append(content); jQuery('#someId').fancybox();这就是我在 firebug 控制台中运行的内容
太棒了！发生了什么。似乎可能涉及其他问题。只需在 firebug 中执行 jQuery 行即可测试 jQuery 是否可用，如果可用则返回一个函数。
这就是发生的事情img232.imageshack.us/f/screenshotylj.png 因此，jQuery 工作正常，因为它创建 iframe 并将其附加到正文。但是 iframe 的正文仍然没有内容

【解决方案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);

【讨论】：