以下是iframe的个人使用总结,以作备忘:
1.iframe的获取方式:
1.1:
在IE/FF中,可以使用:window.frames["iframeID"] 来获取
docuemnt.getElementById("iframeID");
1.2:
在非IE/FF: 可以使用:docuemnt.getElementById("iframeID");
2.iframe 中dom的获取。
2.1:
var currentIframe;
currentIframe.document;
2.2:
var currentIframe;
currentIframe.contentDocument;
3:iframe的滚动高度
有两种方式:
iframe.contentWindow.document.documentElement.scrollHeight;
document.getElementById("iframeID").body.scrollHeight;
4:iframe加载资源的不同
IE/FF ==>iframe.location.href = url;
others<e.g:chrome> =>iframe.src = url;
5:操作iframe
父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild
在子窗口中操作父窗口:window.parent.document
接下来就可以继续获取iframe内的dom了。
获取iframe内的dom对象有两种方法
1 $(window.frames["iframeChild"].document).find("#child")
2 $("#child",window.frames["iframeChild"].document)
1.在父窗口中操作 选中IFRAME中的所有单选按钮
$(window.frames["iframeChild"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作 选中父窗口中的所有单选按钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
6:零星部分:
6.1:我们可以通过给iframe切换url路径来达到加载不同内容的目的,加载的方式上面有总结!
当每次reload的时候,都会执行iframe的"onload"事件!
6.2:iframe中的元素不可以引用到父窗体的资源,e.g:image ,css,js等等!
7:异步使用iframe
7.1:可以这样来做到异步使用iframe:
<iframe name="mangguo"></iframe>假如有个表单:
<form method="post" action="http://www.mangguo.org/index.php" target="mangguo">
<input type="text" name="test" />
<button type="submit">提交表单</button>
</form>提交后数据将发送到 http://www.mangguo.org/index.php 页面,但由于指定 了 target=”mangguo”,所以不在当前窗口打开(也就是不刷新页面的效果),而是在 name=”mangguo” 的 iframe 中 打开。