iframe引用页面并进行页面间的通信

前言:

由于项目中有一部分内容为svg图标,在各个项目中重复引用,因此提出了将svg图标部分放置在单独的项目中运行,引用者只需要按规则传入固定的值,即可进行对应svg的引用。

父组件代码

html代码:

<iframe id="receiver" src="http://192.168.1.17:8080/" width="1100" height="740"></iframe>

JS代码:

window.onload = function(){    //在页面加载完成后主页面向iframe发送请求
    let val = {
        这里些需要传入的值
    }   
    window.frames[0].postMessage(val,'http://192.168.1.17:8080/');
}

以上代码为在页面加载之后调用方法向引用的页面进行传值,但是被引用页面需要将值传入父组件,还需要再调用一个方法,方法如下:

// 主页面监听message事件,接收子组件的值
window.addEventListener('message', function(e){
    console.log(e.data) // 打印值
}}, false);

子组件代码

JS代码:

获取父组件传来的值

window.addEventListener('message', function(e) {
    if (e.source != window.parent)
    return;
    console.log(e.data); // 打印值
}, false);

将值传入父组件

window.parent.postMessage('要传入的值','*'); // 将值传入父组件

备注

父页面和子页面的传值需要在页面加载完成之后调用

原文链接:segmentfault.com

上一篇:JSON.parse 比 Object 字面量语法更快
下一篇:如何让 YARN 支持 CNPM 的完整加速

相关推荐

  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    2 个月前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    16 天前
  • 项目中的导航栏搜索及搜索页面的思路

    项目背景 今天项目里的实习生在做搜索功能时,导航栏的搜索框与搜索页面的搜索框,在内容上竟然是各自独立的。。。。。 无论他怎么鼓捣,在搜索栏上进行搜索,搜索页面都没有任何反应。

    1 个月前
  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    17 天前
  • 页面进入后台如何关闭背景音乐

    之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然...

    10 个月前
  • 页面跳转的归纳

    前端工作有很多地方需要页面跳转,有很多种实现方法,这里做一下归纳。 HTML标签 一般形式上可以用target="blank": 历史跳转 ...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    6 个月前
  • 页面负载启动自举模型

    zanzuBrandon(https://stackoverflow.com/users/4398000/zanzu)提出了一个问题:Launch Bootstrap Modal on page lo...

    2 年前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    2 个月前

官方社区

扫码加入 JavaScript 社区