首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

iframe运用总结

2012-08-26 
iframe使用总结以下是iframe的个人使用总结,以作备忘:?1.iframe的获取方式:1.1:在IE/FF中,可以使用:window

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?中打开。

热点排行