iframe使用总结
以下是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?中打开。