精华内容
下载资源
问答
  • 2022-03-27 17:09:41

    父页面嵌入子页面(不同域)

    parnet.html

     <iframe id="iframe" :src="'http://10.127.20.100:8080/index.html'></iframe>

    通信:父页面向子页面发送消息的方式:

    let contentWindow = document.getElementById('iframe').contentWindow
      contentWindow.postMessage('hi ~ my son!', 'http://10.127.20.100:8080/index.html')

    父页面接受子页面的方式:

     window.addEventListener('message', function(evt){
        let sondata =evt.data // 子页面的消息
    });

    子页面给父页面发消息的方式:

     window.parent.postMessage('hellow father!', '*');
    // 接受父页面消息
    window.addEventListener('message', function(evt){
        //消息内容
    let data =evt.data
    });

    其中需要注意的是,子页面一定要写上html文件,否则跨域的时候会出现接受不到消息的情况。(这是我踩到坑,本地调试不同端口都没问题,上线到其他ip和端口后有问题了)

    另外由于浏览器的安全机制,子页面是用不了cookie 的,如果需要存储本地缓存,可以用localstorage进行缓存。

    如果父页面存在多个子页面,需要有不同的通讯方式,那就要在postmesage里写好指定的html了

    更多相关内容
  • 主要介绍了通过伪协议解决父页面与iframe页面通信的问题,需要的朋友可以参考下
  • iframe子页面与父页面通信方案 一:父页面(调用iframe的页面) 第一步:页面中引入iframe <iframe id="PanIframe" ref={iframeRef} frameBorder={0} width={960} height={600} marginHeight={0} ...

    iframe子页面与父页面通信方案,下面主要介绍父页面与子页面通信方案,根据自己需求做调整,通信方法都类似,以下是案例请参考

    一:父页面(调用iframe的页面)父页面中引入iframe

    第一步:页面中引入iframe

    <iframe
              id="PanIframe"
              ref={iframeRef}
              frameBorder={0}
              width={960}
              height={600}
              marginHeight={0}
              scrolling="no"
              src={yunPanUrls}
    ></iframe>

    第二步:父页面中监听iframe中发送过来的消息

    window.addEventListener('message', receiveMessageIframePage, false);

    第三步:监听到消息之后处理自身的业务逻辑或者与iframe页面通信都可以
    getBoundFileKeys:是iframe页面内部暴露出来的方法,我们在父页面监听这个方法iframes.contentWindow.postMessage: 是发送给iframe的方法,方法名boundFileKeys

    const receiveMessageIframePage = (event) => {
    
            let iframes = document.getElementById('PanIframe'); // 获取iframe元素
    
            // 如果监听到iframe暴露出一个type是getBoundFileKeys的消息,初始化给iframe发送一个boundFileKeys消息,做初始化的操作
            if (event.data.type === 'getBoundFileKeys') {
                    iframes.contentWindow.postMessage({ type: 'boundFileKeys', data: "消息内容体" }, '*');
            }
        
            if (event.data.type === 'check') {
                // 监听iframe暴露出来的check方法
            }
    }

    二:子页面(iframe页面)

    发送消息给父页面获取初始化信息数据或其他业务

    
    window.parent.postMessage({
            type: 'getBoundFileKeys'
    }, '*');

    监听父页面发送过来的消息

    window.addEventListener('message', onMessage, false); // 接收接入方页面发送的消息
    
    const onMessage = (e) => {
        if (!e || !e.data) { return; }
        switch (e.data.type) {
             case 'boundFileKeys':
                   // TODO 处理自己的业务
                   break;
         }
     };

    发送消息给接入方页面

    isInIframe && window.parent.postMessage({
       type: 'check', //自定义名称
       data: ["自定义需要发送的数据"] // 处理数据
    }, '*');

    优化:判断是否处于iframe中

    getIsInIframe() {
        return window.self !== window.top;
    }

    总结:使用到的就是下面这几个方法

    父页面监听iframe消息:
    window.addEventListener('message', receiveMessageIframePage, false);
    
    父页面发送给iframe页面的消息:
    iframes.contentWindow.postMessage({ type: 'boundFileKeys', data: "消息内容体" }, '*');
    
    
    
    iframe页面监听父页面发过来的消息:
    window.addEventListener('message', onMessage, false); 
    
    iframe页面给父页面发送消息:
    
    window.parent.postMessage({ type: 'check',  data: ["自定义需要发送的数据"] }, '*');

    交流
    1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解  群号:   856402057

    2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

                                                                                       
                          

     

    展开全文
  • 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

    展开全文
  • iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。 一、同域下父子页面的通信 父页面parent.html 代码如下: <html> <head> [removed] function say(){ alert(...
  • 在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的; iframe通信可以分为2种,跨域和非跨域两种.分别说明; 有一点很重要,iframe是可以给name 属性的;给上name ...
  • 本Demo汇总是iframe页面iframe页面如何相互调用方法、元素及值的几种常见方法(含JS、JQuery方法)
  • 实现iframe嵌套页面通信 在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~ 1、父组件获取子组件: (注:父组件是当前项目页面,子组件是iframe标签) Iframe....

    实现iframe嵌套页面通信

    在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~

    1、父组件获取子组件:
    (注:父组件是当前项目页面,子组件是iframe标签)
    Iframe.contentWindow:获取iframe的window对象
    Iframe.contentDocument:获取iframe的document对象
    当需要从当前页面传递数据给嵌入的iframe页面时,可通过postMessage()方法进行通信。
    iframe.contentWindow.postMessage(message, targetOrigin, [transfer]);
    postMessage()方法有三个参数,message:即将要传递到其他页面的数据;targetOrigin:指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI,一般用来做数据来源验证;transfer:选填参数,可不传。
    示例:
    ifr为iframe标签
    ifr为iframe标签
    iframe页面中获取传递的数据:
    在这里插入图片描述
    2、子组件获取父组件:
    Window.parent:获取上一级的window对象。如果上一级(父级)还是iframe则是该iframe的window对象
    Window.top:获取最顶级容器的window对象
    Window.self:返回自身window的引用
    (注:调用父级方法,则父级要将发放挂在window层)

    iframe页面向引入的页面传递数据:
    window.parent.postMessage(message, targetOrigin, [transfer])
    获取iframe页面传入的数据,方法与iframe页面获取数据类似,也是通过addEventListener()方法监听message,获取传递的message、targetOrigin等参数数据进行进一步处理。

    (ps:如果对您有帮助,希望点个赞噢(~~)

    展开全文
  • 本文实例讲述了嵌入式iframe页面与父页面js通信的方法。分享给大家供大家参考。具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域...
  • vue页面与iframe页面通信方法

    千次阅读 2019-08-07 14:44:07
    获取iframe里的内容 主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象 这两个API只是DOM节点提供的方式(即...
  • iframe通信

    千次阅读 2022-03-14 10:44:08
    基础信息 ...2.height:height属性指定了iframe的像素高度,建议使用css設置。 3.width:width属性指定了iframe的像素宽度,建议使用css設置。 4.name:iframe的名称,window.frames[name]时专用的属性。 ...
  • 1、页面iframe传递参数, 简单的方法直接放到url里传过去。 ( iframe会在本地浏览器缓存,建议加一个type等于一个随机数,以便请求的是最新的iframe) <iframe ref="iframe" src=...
  • iframe页面间的通信(跨域可实现)

    千次阅读 2019-07-03 22:48:38
    常用的页面通信方式就会因跨域问题而导致失败 各种翻资料,终于找到了解决跨域问题的方法,通过postMessage发送消息,相应的页面进行消息监听,监听到正确消息后再执行操作 下面做一个简单代码示例 子页面js <...
  • 需求是这样的,在我的页面点击一些按钮,要实时反馈到iframe页面,子页面再进行响应。 当时脑子里第一时间想到的解决方案是:用NGINX把两个项目代理到同一域名下。但这样似乎有点小题大做了,有没有更方便快捷的...
  • 1.普通需求:只需要子页面获取父页面元素 window.parent或者参考window.iframe用法,比较简单 2.霸气需求,drag拖动跨ifame(老式的mousedown+mousemove+mouseup模拟的drag事件无法实现) 这里借助...
  • 需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。 1. 在top页面中建立方法供内部页面使用 代码...
  • 而在实际项目开发过程中,经常会利用iframe在一个父页面中嵌入另外一个子页面,或者在一个父页面中弹出另一个页面,由于同源策略的限制,父子页面之间的脚本无法实现通信,而使用postMessage方法就实现了父子页面...
  • iframe父子页面通信总结

    万次阅读 多人点赞 2015-10-09 18:49:17
    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。同域下父子页面的通信页面间通信常以页面间调用实现,包括以下几个方面:(调用包含html dom,js全局变量,js方法) 父
  • 第一、在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二、在父页面中获取iframe中的元素方法: $(this).contents().find(#suggestBox) 第三、在iframe中调用父页面中定义的方法和变量: ...
  • 页面中不存在 iframe 嵌套时,则三者均是当前窗口自身的引用。 同域iframe相互调用: 子页面调用父页面方法:window.parent.fatherFn(); 父页面调用子页面方法: window.sonFrameName.sonFn(); (sonFrameName是...
  • this.$refs.iframe.contentWindow.postMessage(data, '*'); 2、子页面向父页面发送消息 let parentData = {type: 'passDataBack', data: passData}; window.parent.postMessage(parentData, '*'); 3、接收消息...
  • 1,父页面向子页面传递数据 <iframe id="myframe" :src="iframeUrl" frameborder="0" width="100%" :height="iframeHeight"></iframe>
  • iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。 一、同域下父子页面的通信 父页面parent.html function say(){ alert("parent.html"); } function callChild(){ ...
  • 元素遵守同源政策,只有当父窗口与子窗口在同一个域时,两者之间才可以用脚本通信。 document.getElementById 对于iframe嵌入的窗口,document.getElementById方法可以拿到该窗口的 DOM 节点,然后使用...
  • 最近项目中遇到一个与内嵌iframe页面之间通信的问题,起初与原生之间通信很简单,没想到过与vue项目通信的问题,霎时间一脸懵*啊,百度了一下,原来是那么简单,这里记录下以供下次参考 //vue页面 向 内嵌iframe...
  • iframe跨域父子页面通信方法

    千次阅读 2020-06-05 19:02:04
    b以iframe方式嵌在a页面中。 [问题描述] 原来的逻辑是:在b页面有一个保存按钮,点击“保存” -> 将b页面的数据存在B系统,a页面处理完成后调用B系统的接口,把b页面的数据再通过接口的方式传给A系统。 现在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,931
精华内容 7,972
关键字:

iframe页面通信