【www.hj8828.com】利用JS对iframe父子页面进行操作的方法教程_javascript技巧_脚本之家

本文主要给大家介绍了关于利用JS对iframe父子页面进行操作的方法,分享出来供大家参考学习,下面来一起看看详细的介绍:

iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信。

一、获取iframe里的内容

一、同域下父子页面的通信

父页面 Parent.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Parent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function parentSay() {
            alert("Parent.aspx------>I'm at Parent.aspx");
        }

        function callChild()
        {
            //document.frames["myFrame"].window.say();//只适用于ie浏览器
            myFrame.window.childSay();
            myFrame.window.document.getElementById("button").value="我变了";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="调用Child.aspx中的函数childSay()" onclick="callChild()">
        <iframe name="myFrame" src="Child.aspx"></iframe>
    </div>
    </form>
</body>
</html>

子页面 Child.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Child" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function childSay() {
            alert("Child.aspx--->I'm at Child.aspx");
        }
        function callParent() {
            parent.parentSay();
            parent.window.document.getElementsByName("myFrame")[0].style.color = "red";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="button" type="button" value="调用Parent.aspx中的parentSay()函数" onclick="callParent()">
    </div>
    </form>
</body>
</html>

在开始之前,首先我们来看看如何获取iframe里的内容,获取iframe中内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow,
获取iframe的window对象 iframe.contentDocument,
获取iframe的document对象 这两个API只是DOM节点提供的方式

方法调用

 

如上面示例所示父页面调用子页面的方法可通过:FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法:parent.window.parentMethod();

 

 var iframe = document.getElementById; var iwindow = iframe.contentWindow; var idoc = iwindow.document; console.log;//获取iframe的window对象 console.log; //获取iframe的document console.log("html",idoc.documentElement);//获取iframe的html console.log; //获取head console.log; //获取body

DOM元素访问

 

根据FrameName.window得到了子窗口对象之后,再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过
document.getElementById(),document.getElementsByName()[index]。
如:parent.window.document.getElementsByName(“myFrame”)
[0],myFrame.window.document.getElementById(“button”)其中的window都是可以省略的。

 

另外更简单的方式是,结合Name属性,通过window提供的frames获取.

注意事项

 

要确保在Iframe加载完成后再进行操作,如果Iframe还未加载完成就开始调用里面的方法或变量,无疑会产生错误。判断Iframe是否加载完毕有两种方法:
1.在Iframe上用onload事件;
2.用document.readyState==”complete”来判断

 

 Your browser does not support iframes. console.log(window.frames['ifr1'].window);console.dir(document.getElementById.contentWindow);

二、跨域父子页面通信方法

 

如果iframe所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。

 

其实window.frames[‘ifr1']返回的就是window对象,即

父页面向子页面传递数据

 

实现的技巧就是利用 location 对象的 hash
值,通过它传递通信数据,我们只需要在父页面设置 iframe的 src
后面多加个#data 字符串(data就是你要传递的数据),然后在 子页面
中通过某种方式能即时的获取到这儿 data
就可以了,其实常用的一种方式就是:

  1. 在 子页面 中通过 setInterval 方法设置定时器, 监听 location.href
    的变化即可获得上面的 data 信息
  2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。

 

window.frames['ifr1']===window

子页面向父页面传递数据

 

实现的技巧就是利用一个代理 Iframe C,它嵌入到
子页面中,并且和父页面必须保持是同域,然后我们通过它充分利用上面第一种通信方式的实现原理就能把
子页面的数据传递给
iframeC,接下来的问题就是怎么让iframeC把数据传递给主页面A
,因为,iframeC
和主页面是同域的,所以它们之间传递数据就变得简单多了,属于同域名下的通信问题了,如前面所讨论的,在这里的可以使用一个经常使用的属性
window.top (也可以使用window.parent.parent),它返回对载入浏览器得最顶层
window 对象的引用,这样我们就能直接条用父页面中方法啦。

 

参考:

 

1.《SNS平台与第三方APP的JS通信实现》作者:Springwang。

 

2.iframe父子窗口间js方法调用 作者:moreorless。

 

3.IFrame问题汇总作者:dengwf

 

这里就看你想用哪一种方式获取window对象,两者都行,不过本人更倾向于第二种使用frames[xxx].因为,字母少啊喂~
然后,你就可以操控iframe里面的DOM内容。

方法调用

如上面示例所示父页面调用子页面的方法可通过:FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法:parent.window.parentMethod();

二、在iframe中获取父级内容

DOM元素访问

根据FrameName.window得到了子窗口对象之后,再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过
document.getElementById(),document.getElementsByName()[index]。
如:parent.window.document.getElementsByName(“myFrame”)
[0],myFrame.window.document.getElementById(“button”)其中的window都是可以省略的。

同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取.

注意事项

要确保在Iframe加载完成后再进行操作,如果Iframe还未加载完成就开始调用里面的方法或变量,无疑会产生错误。判断Iframe是否加载完毕有两种方法:
1.在Iframe上用onload事件;
2.用document.readyState==”complete”来判断

window.parent
获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象,即,就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self

二、跨域父子页面通信方法

如果iframe所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。

获取了之后,我们就可以进行相关操作了。
在同域的iframe中,我们可以巧妙的使用iframe的黑科技来实现一些trick.

父页面向子页面传递数据

实现的技巧就是利用 location 对象的 hash
值,通过它传递通信数据,我们只需要在父页面设置 iframe的 src
后面多加个#data 字符串(data就是你要传递的数据),然后在 子页面
中通过某种方式能即时的获取到这儿 data
就可以了,其实常用的一种方式就是:

  1. 在 子页面 中通过 setInterval 方法设置定时器, 监听 location.href
    的变化即可获得上面的 data 信息
  2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。

iframe的轮询

子页面向父页面传递数据

实现的技巧就是利用一个代理 Iframe C,它嵌入到
子页面中,并且和父页面必须保持是同域,然后我们通过它充分利用上面第一种通信方式的实现原理就能把
子页面的数据传递给
iframeC,接下来的问题就是怎么让iframeC把数据传递给主页面A
,因为,iframeC
和主页面是同域的,所以它们之间传递数据就变得简单多了,属于同域名下的通信问题了,如前面所讨论的,在这里的可以使用一个经常使用的属性
window.top (也可以使用window.parent.parent),它返回对载入浏览器得最顶层
window 对象的引用,这样我们就能直接条用父页面中方法啦。

参考:

1.《SNS平台与第三方APP的JS通信实现》作者:Springwang。

2.iframe父子窗口间js方法调用 作者:moreorless。

3.IFrame问题汇总作者:dengwf

其它资料:
jquery 父窗口 子窗口
相关操作

作者:Ljhero
出处:
本作品采用署名-非商业性使用
3.0协议进行许可。欢迎转载,演绎,但是必须保留本文的署名Ljhero,且不能用于商业目的。

分类:
【06】WEB开发

标签: web,
iframe

绿色通道: 好文要顶 关注我
收藏该文与我联系
www.hj8828.com 1

www.hj8828.com 2

ljhero
关注 – 17
粉丝 – 15

+加关注

2

0

(请您对文章做出评价)

«
上一篇:写在毕业答辩之后
»
下一篇:【实践】Windows7下安装配置SubVersion

posted @ 2011-07-09 00:37
ljhero 阅读(10828) 评论(3)
编辑
收藏

评论列表

  回复引用

#1楼
2012-10-22 10:40
wodemyworld
 

好文章,mark~

支持(0)反对(0)

  回复引用

#2楼
2013-09-12 01:50
ZhouZe
 

m

支持(0)反对(0)

  回复引用

#3楼
2014-01-02 10:06
ajaxian
 

值得好好学习学习

支持(0)反对(0)

刷新评论刷新页面返回顶部

发表评论

昵称:

评论内容:

www.hj8828.com 3
www.hj8828.com 4
www.hj8828.com 5
www.hj8828.com 6
www.hj8828.com 7
www.hj8828.com 8

话说在很久很久以前,我们实现异步发送请求是使用iframe实现的~! 怎么可能!!!
真的史料为证,
那时候为了不跳转页面,提交表单时是使用iframe提交的。现在,前端发展尼玛真快,websocket,SSE,ajax等,逆天skill的出现,颠覆了iframe,
现在基本上只能活在IE8,9的浏览器内了。
但是,宝宝以为这样就可以不用了解iframe了,而现实就是这么残酷,我们目前还需要兼容IE8+。所以,iframe
实现长轮询和长连接的trick 我们还是需要涉猎滴。

iframe长轮询

如果写过ajax的童鞋,应该知道,长轮询就是在ajax的readyState =
4的时,再次执行原函数即可。
这里使用iframe也是一样,异步创建iframe,然后reload, 和后台协商好,
看后台哥哥们将返回的信息放在,然后获取里面信息即可. 这里是直接放在body里.

var iframeCon = docuemnt.querySelector, text; //传递的信息 var iframe = document.createElement, iframe.id = "frame", iframe.style = "display:none;", iframe.name="polling", iframe.src="target.html"; iframeCon.appendChild; iframe.onload= function(){ var iloc = iframe.contentWindow.location, idoc = iframe.contentDocument; setTimeout{ text = idoc.getElementsByTagName[0].textContent; console.log; //刷新页面,再次获取信息,并且会触发onload函数 },2000); }

这样就可以实现ajax的长轮询的效果。
当然,这里只是使用reload进行获取,你也可以添加iframe和删除iframe的方式,进行发送信息,这些都是根据具体场景应用的。另外在iframe中还可以实现异步加载js文件,不过,iframe和主页是共享连接池的,所以还是很蛋疼的,现在基本上都被XHR和hard
calllback取缔了,这里也不过多介绍了。

1.js在iframe子页面操作父页面元素代码:

window.parent.document.getElementByIdx_x;

2.js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x;