jQuery添加带有内容的iFrame

时间:2011-01-06 12:23:40

标签: jquery iframe fancybox

我有这样的问题。 我需要在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页面,但是当我尝试附加一些文本时它也不起作用)。

我做错了什么? 也许有另一种方法可以做我需要的事情?

感谢您的建议!

3 个答案:

答案 0 :(得分:18)

在调用jquery的就绪方法之后,你的问题将会解决,如

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

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

答案 1 :(得分:4)

如果将该行分成两行,会发生什么:

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

然后在创建新iframe之前将选择器更改为正确,而不是将其插入DOM和调用fancybox,但这应该有效:

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

答案 2 :(得分:2)

已经过了这个问题的时间,但这是另一个解决方案:

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);