父子页面通信

js、jq父子页面通信方法总结

2019-10-04 17:32:35

11

转载于:https://www.cnblogs.com/xing2019/p/10400524.html

更多相关内容

iframe之父子页面通信

2020-08-05 21:13:52

1、获取子页面的 window 对象获取子页面的 window 对象，即获取了子页面的所有变量和方法，获取方法如下： // iframe id document.getElementById('menuIframe').contentWindow // iframe name window....

文章目录

iframe之父子同源页面的通信

1、获取子页面的 window 对象 ----- `获取iframe节点的contentWindow属性`

获取子页面的 window 对象，即获取了子页面的所有变量和方法，获取方法如下：

// iframe id
document.getElementById('menuIframe').contentWindow
 
// iframe name
window.frames['menuIframe'].window
 
// iframe index 当前窗体的第几个 iframe
window.frames[1].window

2、子 iframe 获取父页面----- `window.parent`

window.parent 即为当前页面的上一级页面的 window 对象

window.parent

3、Demo

parent.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<iframe src="./children.html" name="iframeContainer" id="iframeContainer"></iframe>
	</body>
	<script type="text/javascript">
		function parentHello() {
			alert("this is parent hello function!");
		}

		//必须在页面加载完成再操作dom
		window.onload = function() {
			//document.getElementById('iframeContainer').contentWindow.sayChild(); 
			//window.frames['iframeContainer'].window.sayChild(); 
			window.frames[0].window.sayChild();
		}

	</script>

</html>

children.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	<button onclick="say()">告诉父页面</button>
    <script type="text/javascript">
        function sayChild() {
            alert("this is sub hello function!");
        }
        
        function say(){
        	window.parent.parentHello();
        }
        
    </script>
</body>
</html>

与打开的同源新标签页面通信

发送消息----- `postMessage`

页面对象.postMessage(message, targetOrigin);

父获子页面对象：document.getElementById("otherPage").contentWindow

子获父页面对象：

window.parent : 获取父页面的window对象 、
window.opener : 获取打开这个页面的那个页面的window对象

接收消息----- `监听message方法`

window.addEventListener("message", function(event) {       
    console.log(event, event.data);   
}, false);

案例如下

// A页面-----接收页，从此页面打开B页面
<body>
    <a href="javascript:;" onclick="window.open('./message.html')">xxxx</a>
    <script>
        var readFlag = false;
        window.addEventListener('message', function (e) {
            console.log(e.data);
        }, false)
    </script>
</body> 
 
 
 
//B页面---发送页 ，向打开这个页面的A页面发送信息。
<body>
    <button class="btn">点击</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
       
        $('.btn').click(function () {
             // iframe 嵌套的情况下，获取父页面
            //window.parent 用于iframe嵌套情况下寻找上级window对象
            //window.parent.postMessage({ readFlag: false }, '*')

            //跳转打开新页面的情况下，获取父页面，即打开新页面的原始页面
            var targetWindow = window.opener; // 获取打开此页面的window对象
            targetWindow.postMessage({ readFlag: false }, '*')
        })
    </script>
</body>

参考链接 https://www.cnblogs.com/s313139232/p/10430151.html

收起

展开全文

利用 postMessage 实现父子页面通信
2020-12-30 18:33:38

下面介绍一种 postMessage 方式实现父子页面通信的方法，首先先了解一个应用场景：父页面有一个列表，每一个列有一个"编辑"按钮，点击按钮打开一个新的 tab 页面为子页面子页面是某一列内容的编辑页面，子页面有一个...

下面介绍一种 postMessage 方式实现父子页面通信的方法，首先先了解一个应用场景：

父页面有一个列表，每一个列有一个"编辑"按钮，点击按钮打开一个新的 tab 页面为子页面

子页面是某一列内容的编辑页面，子页面有一个"保存并关闭"的按钮

点击子页面的"保存并关闭"的按钮，子页面关闭，向主页面发起一次通信，告知主页面需要刷新列表

主页面接受子页面的通信，根据父子页面约定好的标识，判断是否需要刷新数据列表，是的话执行刷新列表操作，over

这个需求在一些PC端的企业管理系统中经常会遇到，也是一个比较好的用户体验，下面先看实现方法(框架使用的是 vue)，demo后有原理实现呦~！

父页面：

// "编辑"按钮

methods: {

handleEdit() {

window.open('www.xxx.com', '_blank');

}

},

mounted() {

// 接受子页面的请求信息

window.addEventListener('message', (event) => {

if (event.origin === window.location.origin) {

// 根据接受到的信息执行对应的方法

if (event.data === 'update') {

// 这里调用刷新数据列表方法

}

}

})

}

子页面：

methods: {

// 关闭子页面并向父页面发起通信

handleClosePage() {

if (window.opener) {

window.opener.postMessage('update', window.opener.origin);

}

window.close();

}

}

首页第一个需要介绍的知识点是 HTML DOM 事件中的 "onmessage" 事件，这个事件的描述是"该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发"。在这个应用场景中"onmessage"的作用就是父窗口接收信息。

那如何向父页面传递信息呢，就用到了子页面中的 postMessage 方法，postMessage 可以安全地实现跨源通信，它接受三个参数，第一个是 message，也就是需要发送的信息；第二个是 targetOrigin，通过窗口的 orgin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这一点在传递一些比如密码之类的加密数据时尤为重要。强烈不建议用"*"，这样会有被恶意第三方截获的风险！第三个参数是一串和 message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

这样通过 "onmessage" 和 postMessage 就可以实现父子页面的通信了，那为什么父子页面中都加了 if 的 case 拦截呢？下面一个一个说：

先介绍子页面的 window.opener 对象，我们知道在中提供了一个用于父子页面交互的对象，叫做 window.parent，我们可以通过 window.parent 对象来从框架中的页面访问父级页面的 window。opener 和 parent 一样，只不过用于在新标签页打开的页面，我们可以直接使用 window.opener 来访问来源页面的 window 对象。

当然如果父页面被手动关闭了的话，window.opener 也就变成了 null，所以需要加一个 window.opener 是否存在的判断，然后再调用父页面的 postMessage 方法，targetOrigin则直接使用父页面的 origin，这里我没有写死。这样子页面的逻辑就完整了。

注意，使用 target="_blank" + opener 的方式有可能是危险的，进一步了解：危险的 target="_blank" 与 “opener”

再就是父页面中 addEventListener('message') 的回调函数了，从回调函数中可以拿到 event 对象，event 中有三个属性：① data，也就是接收到的信息(注意: 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前，参数 message 必须是一个字符串。从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始，参数 message被使用结构化克隆算法进行序列化。这意味着您可以将各种各样的数据对象安全地传递到目标窗口，而不必自己序列化它们。)；② origin，就是 postMessage 中的 targetOrigin 参数，用来过 origin 过滤；③ source，对发送消息的窗口对象的引用；可以使用这个参数来使具有不同 origin 的两个窗口之间建立双向通信，因为这个应用场景没有这个需求，所以这块就不展开说明了。

这样我们就知道了 event.origin === window.location.origin 的作用，根据 origin 这过滤其他 origin 传递过来的信息。这个判断很重要，不加就很多可能会被 XSS 攻击！

至此所有的知识点就介绍完了，更多细节请参考以下链接：

收起

展开全文
如何实现iframe父子传参通信
2020-12-28 18:45:47

在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的; iframe通信可以分为2种,跨域和非跨域两种.分别说明; 有一点很重要,iframe是可以给name 属性的;给上name ...

收起

iframe父子页面通信

千次阅读 2018-08-30 11:22:56

1 同域名下iframe父子页面通信。简单的讲就是：父页面调用子页面方法：chiildFrameName.window.childMethod(); 子页面调用父页面方法：parent.window.parentMethod(); 当然方法不止一种，上边是比较简单的一种...

1 同域名下iframe父子页面通信。

简单的讲就是：

父页面调用子页面方法：chiildFrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

当然方法不止一种，上边是比较简单的一种，其他方法看下面代码。

父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fu</title>
</head>
<body bgcolor="red">   
  <script>
    function fuFn() {
      console.log("我是父页面");
    }
    function func() {
    // 通过子iframe的name获取
      zi.window.ziFn();
      zi.window.document.getElementById('button').innerHTML = '调用结束';
    // 通过自iframe的id获取
       document.getElementById('zi').contentWindow.ziFn();
       document.getElementById('zi').contentWindow.document.getElementById('button').innerHTML = '调用结束'; 
    // 通过window对象的frames[]数组对象直接获取子frame对象
        window.frames[0].ziFn()
        window.frames["zi"].document.getElementById('button').innerHTML = '调用结束';
    }
  </script>
  <button id="button" onclick="func()"> 调用儿子的方法 </button>
  <iframe id="zi" name="zi" src="zi.html" frameborder="1"></iframe>
</body>
</html>

子页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>zi</title>
</head>
<body bgcolor="blue">

  <script>
    function ziFn() {
      console.log('我是子页面');
    }
    function func() {
    // 通过parent对象获取，/window 可以省略
      parent.window.fuFn();
      parent.window.document.getElementById('button').innerHTML = '调用结束'
    //  通过top对象获取,window 可以省略 ,window.top 为顶级页面。
     top.window.fuFn();
     top.window.document.getElementById('button').innerHTML = '调用结束'
    }
  </script>
	<h1>子页面</h1>
  <button id="button" onclick="func()"> 调用爸爸的方法 </button>
</body>
</html>

如果你想使用jquery的话，那就：

// 获取iframe中的元素
$("#zi").contents().find("#button").html("调用结束");
zi.window.$("#button").html("调用结束");		 
// 调用iframe中的方法
$("#zi")[0].contentWindow.ziFn();


// 子页面获取父页面的 parentDiv
$('#button', parent.document).html("调用结束");
		
// 子页面调用父页面方法
window.parent.fuFn();

注意事项：

要确保在Iframe加载完成，如Iframe还未加载完成就开始调用里面的方法或变量，会报错。

判断Iframe是否加载完毕有两种方法：

1.在Iframe上用onload事件或者用document.readyState=="complete"来判断

document.getElementById('IframeId').onload = function(){
    alert("Local iframe is now loaded.");
};
if(iframe.readyState == "complete"){
    alert("Local iframe is now loaded.");
}

总结：

获取子页面的 window对象
document.getElementById('menuIframe').contentWindow // iframe id
window.frames['menuIframe'].window // iframe name
window.frames[1].window // iframe index 当前窗体的第几个 iframe

获取父页面window对象

window.parent即为当前页面的上一级页面的 window对象，如果当前页面已是顶层页面，则 window.parent 就是自己

window.top为顶级页面。

2 跨域下iframe父子页面通信。

第一种方法：html5的postMessage。

HTML5提供了跨文档消息机制（Cross Document Messaging），它提供了跨越frame、tabs或windows通信的能力。使用方法：

otherWindow.postMessage(message, targetOrigin);

otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。

message: 所要发送的数据，string类型。

targetOrigin: 用于限制otherWindow，“*”表示不作限制。