请使用firefox,chrome等最新浏览器浏览本站。

javascript/jquery操作iframe对象

js+jquery 阿豹 405次浏览 0个评论 扫描二维码

在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

以以下代码为例:
index.html

<iframe src="header.html" width="" height="" id="header"></iframe>
<iframe src="footer.html" width="" height="" id="footer"></iframe>

header.html

<div id="headerIframe">
     headerIframe
</div>
<input type="button" name="btnHeader" id="btnHeader" value="btnHeader" />

footer.html

<div id="footerIframe">
     footerIframe
</div>
<input type="button" name="btnFooter" id="btnFooter" value="btnFooter" />


需求一:在index.html中获取iframe(#header)的window对象

    document.getElementById("header").contentWindow;


需求二:在index.html中刷新iframe(#header)

    document.getElementById("header").contentWindow.location.reload();


需求三:在index.html中获取iframe(#header)的document对象

    document.getElementById("header").contentWindow.document;


需求四:在index.html中输出iframe(#header)中的 div(#headerIframe)的内容

    document.getElementById("header").contentWindow.document.getElementById("headerIframe").innerHTML;

jquery实现:

$("#header").contents().find("#headerIframe").html();


需求五:在header.html中刷新index.html

    parent.location.reload();


需求六:在header.html中刷新footer.html

    parent.document.getElementById("footer").contentWindow.location.reload();


需求七:在header.html中获取footer.html中的 div(#footerIframe)的内容

    parent.document.getElementById("footer").contentWindow.document.getElementById("footerIframe").innerHTML;

jquery实现:

$('#footer', parent.document).contents().find("#footerIframe").html();

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到