精华内容
下载资源
问答
我要提问
  • iframe页面通信 关于跨域 Iframe 页面通信的问题总结
    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页面通信的问题

     2020-09-03 20:13:34
    主要介绍了通过伪协议解决父页面与iframe页面通信的问题,需要的朋友可以参考下
    收起

  • Iframe父页面子页面通信

     2021-09-28 17:35:30
    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子页面与父页面在同域或不同域下的js通信

     2021-01-21 12:37:55
    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。 一、同域下父子页面的通信 父页面parent.html 代码如下: <html> <head> [removed] function say(){ alert(...
    收起

  • 如何实现iframe父子传参通信

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

  • iframe父页面与子页面通信及相互调用方法

     2018-09-13 15:03:55
    本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法（含JS、JQuery方法）
    收起

  • 实现iframe嵌套页面通信

     2021-07-12 11:42:27
    实现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：如果对您有帮助，希望点个赞噢(~~）

    收起
    展开全文
    html javascript

  • 嵌入式iframe子页面与父页面js通信的方法

     2021-01-21 13:03:53
    本文实例讲述了嵌入式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]时专用的属性。 ...
    收起
    safari html css

  • iframe和页面之间的通信

     2021-02-19 17:22:31
    1、页面向iframe传递参数， 简单的方法直接放到url里传过去。 （ iframe会在本地浏览器缓存，建议加一个type等于一个随机数，以便请求的是最新的iframe） <iframe ref="iframe" src=...
    收起
    javascript

  • iframe页面间的通信（跨域可实现）

     千次阅读 2019-07-03 22:48:38
    常用的页面通信方式就会因跨域问题而导致失败 各种翻资料，终于找到了解决跨域问题的方法，通过postMessage发送消息，相应的页面进行消息监听，监听到正确消息后再执行操作 下面做一个简单代码示例 子页面js <...
    收起
    iframe iframe跨域 iframe页面交互 跨域

  • 详解使用postMessage解决iframe跨域通信问题

     2020-12-13 21:53:23
    需求是这样的，在我的页面点击一些按钮，要实时反馈到iframe子页面，子页面再进行响应。 当时脑子里第一时间想到的解决方案是：用NGINX把两个项目代理到同一域名下。但这样似乎有点小题大做了，有没有更方便快捷的...
    收起

  • 前端iframe子页面与父页面通信问题

     2019-04-24 14:20:04
    1.普通需求：只需要子页面获取父页面元素 window.parent或者参考window.iframe用法，比较简单 2.霸气需求，drag拖动跨ifame（老式的mousedown+mousemove+mouseup模拟的drag事件无法实现） 这里借助...
    收起

  • iframe跨域通信封装详解

     2020-12-08 23:38:46
    需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html，而在iframe页面中希望通过点击一个按钮，调用top页面的一个js方法。 1. 在top页面中建立方法供内部页面使用 代码...
    收起

  • 使用iframe+postMessage实现页面跨域通信的示例代码

     2020-11-21 17:20:34
    而在实际项目开发过程中，经常会利用iframe在一个父页面中嵌入另外一个子页面，或者在一个父页面中弹出另一个页面，由于同源策略的限制，父子页面之间的脚本无法实现通信，而使用postMessage方法就实现了父子页面...
    收起

  • iframe父子页面间通信总结

     万次阅读 多人点赞 2015-10-09 18:49:17
    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。同域下父子页面的通信页面间通信常以页面间调用实现，包括以下几个方面：（调用包含html dom，js全局变量，js方法） 父
    收起
    html 跨域通信

  • 利用JQuery操作iframe父页面、子页面的元素和方法汇总

     2021-01-19 20:13:04
    第一、在iframe中查找父页面元素的方法： $('#id', window.parent.document) 第二、在父页面中获取iframe中的元素方法： $(this).contents().find(#suggestBox) 第三、在iframe中调用父页面中定义的方法和变量： ...
    收起

  • iframe页面跨域父子传参通信

     2021-08-05 10:18:05
    当页面中不存在 iframe 嵌套时，则三者均是当前窗口自身的引用。 同域iframe相互调用： 子页面调用父页面方法：window.parent.fatherFn(); 父页面调用子页面方法： window.sonFrameName.sonFn(); (sonFrameName是...
    收起

  • iframe 子父页面互相通信

     2021-09-13 15:19:26
    this.$refs.iframe.contentWindow.postMessage(data, '*'); 2、子页面向父页面发送消息 let parentData = {type: 'passDataBack', data: passData}; window.parent.postMessage(parentData, '*'); 3、接收消息...
    收起
    javascript vue.js

  • iframe父子页面互相通信

     2021-06-07 16:39:29
    1，父页面向子页面传递数据 <iframe id="myframe" :src="iframeUrl" frameborder="0" width="100%" :height="iframeHeight"></iframe>
    收起
    html javascript jquery

  • js之iframe子页面与父页面通信

     2016-09-09 10:10:32
    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。 一、同域下父子页面的通信 父页面parent.html function say(){ alert("parent.html"); } function callChild(){ ...
    收起
    ifram 获取

  • iframe页面使用Js实现父页面和子页面通信

     2019-10-04 22:34:28
    元素遵守同源政策，只有当父窗口与子窗口在同一个域时，两者之间才可以用脚本通信。 document.getElementById 对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的 DOM 节点，然后使用...
    收起

  • 关于vue项目和内嵌iframe页面之间的通信问题

     2018-12-31 20:20:00
    最近项目中遇到一个与内嵌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页面通信