精华内容
下载资源
问答
  • 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 方式实现父子页面通信的方法,首先先了解一个应用场景:父页面有一个列表,每一个列有一个"编辑"按钮,点击按钮打开一个新的 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父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的; 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,“*”表示不作限制。

    父页面代码:

    // 父页面添加消息监听e.data为postMessage传来的参数,默认为’ubaLoadDone’。
    window.addEventListener('message', function(event){
          console.log('event.data是子页面通过postMessage传来的数据'+event.data);
          if(event.data != undefined && event.data !='ubaLoadDone'){
            // do something
          }
        }, false);

    子页面代码:

    var post= {"name":"abc"};
    window.parent.postMessage(post,'*');

     

    展开全文
  • iframe跨域父子页面通信方法

    千次阅读 2020-06-05 19:02:04
    尽管iframe因兼容、性能等问题逐渐被替换掉,但有不少存量项目仍在使用。最近,我们部门一位小... 将b页面的数据存在B系统,a页面处理完成后调用B系统的接口,把b页面的数据再通过接口的方式传给A系统。 现在优化...
  • Parent.html Parent Parent 打开子页面 Child.html Child Child
  • 使用postMessage实现页面之间的通信 核心代码只有postMessage那一段 这是主页面的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...
  • //给父页面传值 function openWin(){ message=window.document.getElementById('name').value targetWin.postMessage(message,'*') }
  • 同域: 获取标签: parent.document.... 获取参数(参数需为所在页面的全局参数): parent.parentParam; 和 window.frames["subIframe"].contentWindow.subParam; 调用方法(方法需为所在页面的全局方法):
  • 1、获取子页面 的 window 对象在父页面中,存在如下两个对象window.framesdocument.iframeElement.contentWindow可以获取到 子页面 window 对象// iframe iddocument.getElementById('menuIframe').contentWindow// ...
  • 1,父页面向子页面传递数据 <iframe id="myframe" :src="iframeUrl" frameborder="0" width="100%" :height="iframeHeight"></iframe>
  • 本文实例讲述了javascript父子页面通讯的实现方法。分享给大家供大家参考。具体分析如下: 如果一个domain为 www.abc.com的页面内部包含一个name属性值为childFrame的iframe,并且这个iframe的domain为 static.abc....
  • 在iframe中会有父子页面之间的通信问题是比较头疼的事情。下面总结下跨域情况下父子页面之间怎么进行通信。 父页面:域名1;子页面:域名2。 一、父页面向子页面传参: 父页面: <iframe id="iframeDom" src="" /...
  • 1.有A,B两个页面,将B页面通过iframe嵌套到A页面当中 <iframe name='bulletscreeniframe' class='iframe1' src="页面的url" frameborder='0' ></iframe> 2.在子页面调用父页面的方法: parent.$(...
  • 以HT for web(图扑软件)为例,对父页面进行监听,根据业务需要,当点击对应组件时,发送消息给子页面,同时对子页面进行监听,收到父页面的消息后做出响应 父页面传递消息给子页面: // 此方法写在父页面中 ...
  • 本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法(含JS、JQuery方法)
  • 1.父级页面传给子页面传参并使用子页面方法 子页面接受用props 父级直接this.$refs.xx.xx()来调用子页面方法 2.子级页面传给父页面传参并使用父页面方法 子页面调用$emit传值给父级 父页面provide来提供方法子页面...
  • Vue iframe父子通信

    2022-03-09 11:38:44
    } iframe里的vue页面发送消息与接收消息 mounted() { // 发送消息 window.parent.postMessage({ str: 'hello' }, '*'); // '*'参数表示没有跨域限制 // 接受消息 window.addEventListener('message', (event: any)...
  • 基本概念: window.self: 当前窗口...子页面调用父页面方法:window.parent.fatherFn(); 父页面调用子页面方法: window.sonFrameName.sonFn(); (sonFrameName是iframe的name值) 非跨域 父调子 //父页面 <button c
  • vue中非父子组件通信

    2022-02-07 23:04:18
    在上一篇博客中,我们总结了父子组件通信方式有:props + emit。这里我们将总结一下,非父子组件通信方式,这里还不涉及到Vuex。 如果存在祖孙组件,我们可以通过Provide和Inject进行通信。 如果不是祖孙组件,也...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,923
精华内容 7,569
关键字:

父子页面通信