iframe与jQuery

时间:2010-02-09 14:29:31

标签: jquery iframe selector

我有一个纯JS的脚本,它接受代码并将其插入到iframe中:

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = document.getElementById('contentsframe');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframe.document.open();
iframe.document.write(html);
iframe.document.close();

我想创建一个jQuery插件,因为我经常使用这段代码,我尝试了几种方法来获取jQuery的iframe:

var iframe = $('#contentsframe');
var iframe = $('#contentsframe').contents();

这两个似乎都返回了错误类型的对象,然后调用document.open,write或close。我们知道解决方案吗?

干杯

EEF

2 个答案:

答案 0 :(得分:3)

我一直在使用你在帖子中提到的相同代码,没有问题。尝试这样的事情:

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = $('#contentsframe').contents().find("body").append(html);

这应该将您的代码附加到iframe的正文标记的开头。

编辑:在这种情况下,var iframe将设置为iframe的body元素,这可能会令人困惑。 $('#contentsframe')。contents()实际上会引用整个iframe对象。

答案 1 :(得分:0)

我最近写了一个应用程序,我必须做这种事情。我在互联网上经常发帖子,但没有一个对我有用。以下是我最终使用的工作。

我在主索引/框架集代码中声明的变量。

    <script> 
        // Global Variables     
        var index = -1;
    var panes = 0;
        var panesHeight=0;
        var pageMode=1;
        var zoomLevel=-2;
    </script>
</head>
<frameset cols="150,*" border="1" bordercolor="#ffffff">
    <frame name="leftNav" src="sidebar.html">
    <frameset rows="*,80" border="1"  bordercolor="#ffffff" >
        <frame name="main" src="main.html" noresize scrolling=auto marginheight=5  marginwidth=5><frame name="pagenav" src="nav.html" noresize scrolling=no marginheight=5  marginwidth=5>
    </frameset>
</frameset>

然后使用这样的东西我需要存储变量和访问帧。这工作得很好,并与jQuery很好地合作。我对这些回复感兴趣,因为如果可能的话,我想清理这些代码。

    if (window.parent.pageMode == 1) {
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" onclick="if(window.parent.pageMode==1){nextPage();showPages();}" style="cursor:e-resize;" >');
    }else{ // mode 0
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" align="right"  onclick="if(window.parent.pageMode==0){prevPage();showPages();}" style="cursor:w-resize;" >');
        $('#right', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 2].image + '" width="' + zoom + '" align="left"  onclick="if(window.parent.pageMode==0){nextPage();showPages();}" style="cursor:e-resize;" >');
    }