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加载资源的不同

ＩＥ/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 中 打开。