iframe嵌套页面传值

前言：

最近负责的项目大部分都是在别人的网站中通过iframe标签嵌套我方页面，而且项目没有使用近年来流行的框架，所以在本文中的代码只是基于js进行编写。

一、父向子传值

方法一：通过src拼接上需要传递的参数

父页面

<body><div>父级页面</div><iframe src="2.html" id="frame1" frameborder="0"></iframe><script>// 方法一：通过src向子元素传递参数let url = document.getElementById('frame1').src + '?name=LeeYuFan&sex=女' //拼接上需要传递的参数document.getElementById('frame1').src = url</script>
</body>

子页面

<body><div>子页面--2.html页面</div><script>window.onload = function(){let name = getUrlParam('name')let sex =  decodeURIComponent(getUrlParam('sex')) //解码console.log(name,sex)}function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象var r = window.location.search.substr(1).match(reg); // 匹配目标参数if (r != null)return r[2];return null; // 返回参数值}</script>
</body>

方法二：通过window对象的postMessage()方法

数据发送方（父页面）

<body><div>父级页面</div><iframe src="2.html" id="frame1" frameborder="0"></iframe><script>window.onload = function(){// 方法二：通过postMessage()方法let send = document.getElementById('frame1').contentWindow;send.postMessage("被传递的数据",'*')}</script>
</body>

数据接收方（子页面）

<body><div>子页面--2.html页面</div><script>window.onload = function(){window.addEventListener('message',function(e){console.log(e.data)})}</script>
</body>

注：

1、postMessage(参数1，参数2，[参数3])方法有三个参数，参数1代表将要发送的数据；参数2代表指定哪些窗口能结合搜到消息事件，其值可以是*或一个URL，（‘*’代表无限制）；参数3可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

2、接收方的回调函数中包含三个常用的数据：

e.source --消息源，消息发送的窗口/iframe

e.origin -- 消息源的URI,用来验证数据源

e.data -- 发送过来的数据

二、子向父传值

方法一：子页面把要传递给父元素的参数定义为全局变量，然后父页面直接获取

子页面定义变量

<body><script>var name = 'LeeYuFan'</script>
</body>

父页面读取变量

<body><div>父级页面</div><iframe src="3.html" id="frame2" frameborder="0"></iframe><script>window.onload = function(){console.log(document.getElementById('frame2').contentWindow.name)}</script>
</body>

方法二:使用postMessage()方法

子页面

<body><div>子页面--2.html页面</div><script>window.parent.postMessage('123','*')</script>
</body>

父页面

<body><div>父级页面</div><iframe src="2.html" id="frame1" frameborder="0"></iframe><script>window.onload = function(){window.addEventListener('message',function(e){console.log(e.data)})}</script>
</body>

iframe嵌套页面传值相关推荐

关于iframe嵌套页面传值
1.我这边为vue的页面,直接在static里面将页面放进去,通过url进行传值 <iframe id="theirs2" :src="'static/rtc2. ...
上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
最近做了个用户维护功能,涉及到照片的操作. 照片是存到数据库oracle中的Blob字段中. 难点有两个: 1,图片的上传:2,Blob字段的读取. 先说图片的上传吧, 我使用common-fileu ...
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^.今天抽时间整理一 ...
vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能
vue项目中需要嵌套第三方的页面,但是第三方页面中的网页没有返回按钮,如图所示:此为页面b,页面a为跳到b页面的前一个页面. 点击iframe嵌套页面跳转的第二个页面要实现不管进入多少层iframe ...
TP超链接无法下载问题解决 hrome浏览器默认禁止iframe嵌套页面下载文件
var urlshow="{:U('Grant/download')}&grt_id="+row['grt_id']; let link = document.create ...
实现iframe嵌套页面通信
实现iframe嵌套页面通信在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~ 1.父组件获取子组件: (注:父组件是当前项目页面,子组件是if ...
关于前端iframe嵌套页面的跳转问题
因工作中遇到的项目,有iframe页面嵌套,遇到了页面跳转的问题,所以记录解决问题的过程关于前端iframe嵌套页面的跳转问题问题: 在A页面使用iframe嵌套了B页面,B页面中做了权限校验,即 ...
前端Docker部署 https服务以及使用 iframe嵌套页面遇到的问题
中心思想:先部署 http服务,再部署 https服务转发到 http服务上 (如果 http和 https服务部署在同一台服务器上,可共用一个 docker容器同时部署,见 3) 前端Docker微 ...
移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题
移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题一.业务需求/及问题点业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe s ...

iframe嵌套页面传值

iframe嵌套页面传值相关推荐

最新文章

热门文章