1、首先来说一下iframe是干什么用的

　　IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架），通俗点说就是在一个页面中通过写iframe标签来嵌入另一个页面

2、代码的实现

　　首先是父元素

　　

<!DOCTYPE html>

<html lang="zh-cn">

<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>iframe父子页面互调</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <h2>子页面调用postMessage，父页面通过监听来获取子页面的数据</h2>

    <div style="width:400px; height: 200px;">

        <iframe src="son1.html" frameborder="0" style="width:100%; height: 100%;"></iframe>

    </div>

    <div id="output"></div>

    <h2>子页面调用父页面的一些方法</h2>

    <script>

        window.addEventListener('message', function (e) {

            console.log(e.data);

            var data = e.data;

            if (data.txt) {

                var output = document.getElementById('output');

                output.innerHTML = `新的名字是：${data.txt}`;

            }

        }, false);

        function fun() {

            console.log('这是父页面打印出的');

        }

    </script>

</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>子页面</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div style="width:300px; height: 180px; border:1px solid #000">

        请输入一些值：<input type="text" id="text1" />

        <button onclick="sendMessageToParent()">设置</button>

        <button onclick="click()">

            点击调用父元素的方法

        </button>

    </div>

    <script>

        function sendMessageToParent() {

            //设置test键值下的内容等于input框中的内容

            var txt = document.getElementById('text1').value;

            // 下面也可以用（window.parent.postMessage({txt:txt});） top代表父元素的最顶层

            window.top.postMessage({ txt: txt });

        }

        // 调用父元素的方法

        $(function () {

            parent.fun();

        })

    </script>

</body>

</html>

3、将代码复制下来 打开就OK了

注意：此代码会涉及到一下跨域问题 关于浏览器本地跨域的问题 参照我下一篇文章

页面嵌入iframe关于父子传参调用的更多相关文章

  1. javascript之url转义escape()、encodeURI()和decodeURI()，ifram父子传参参数有中文时出现乱码

    ifram父子传参参数有中文时出现乱码,可先在父级页面用encodeURI转义,在到子页面用进行decodeURI()解码 我们可以知道:escape()除了 ASCII 字母.数字和特定的符号外,对 ...

  2. 微信小程序（14）--上传图片公用组件(父子传参)

    这周整理了一下做微信小程序页面时遇到的一些问题,先说说常见的上传图片吧. 上传图片公用组件 首先要了解的是父子传参. 1.A组件为父组件,B组件为子组件,以下是A组件向B组件传参: 在A组件的json ...

  3. Tolist案例（父子传参实现增删改）

    1.Tolist案例(父子传参实现增删改) 目录结构 实现效果: App.jsx class App extends Component { // 状态在哪里, 操作状态的方法就在哪里 state = ...

  4. 使用java传参调用exe并且获取程序进度和返回结果的一种方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在某个项目中需要考虑使用java后台调用由C#编写的切图程序( ...

  5. session失效后，登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  6. WEB传参调用EXE

    WEB传参调用EXE 让浏览器运行本地的EXE程序.例如:点击浏览器的一个下载链接,就会打开本地的迅雷. 1)注册表注册 Windows Registry Editor Version 5.00 [H ...

  7. flutter页面间跳转和传参-Navigator的使用

    flutter页面间跳转和传参-Navigator的使用 概述 flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由. 命名路由 这种路由需要一开始现在创建App的时候定义 new M ...

  8. Flutter 路由 页面间跳转和传参 返回

    Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...

  9. 页面嵌入iframe那些事儿

    一.用iframe如何把别人的页面嵌入自己的页面? <iframe src="http://blog.sina.com.cn/abc" frameBorder=0 scrol ...

随机推荐

  1. Qt for Android修改应用程序的图标和名称

    使用QT开发出的Android Apk安装后默认的图标是安卓的小机器人,下面介绍在QT5.12版本上修改APP名称和图标的方法. 1.  编译一次项目后,在编译目录下找到AndroidManifest ...

  2. Android viewPager+fragment实现滑页效果

    先上图,手指在手机向左或者向右滑就可以实现相应的页面切换. 先看activity_main.xml文件,非常简单,主要是三个标题TextView和viewpager <?xml version= ...

  3. canal中间件

    简介: 基于数据库增量(模拟MySQL slave的交互协议)日志解析,提供增量数据订阅和消费(客户端与canal建立关系) 安装版本:1.1.0 git 环境需求: jdk1.7以上 mysql开启 ...

  4. SceneView聚焦当前选中项

    编辑器代码如下所示: Selection.activeGameObject = indexer; // 方法一 SceneView.FrameLastActiveSceneView(); // 方法二 ...

  5. Android开发：为什么你的学习效率如此低，为什么你很迷茫？

    一天一天的过的真的是太快了,常常感到时间在前进,而我们还在停滞不前,看似每天努力的工作学习着,仔细想想其实又会发现,一天下来我们好像还真的什么都没干,看似忙碌的一天,我们把时间都用在哪了?学习!可是为 ...

  6. Kibana 学习资料

    Kibana 学习资料 网址 Kibana 官方文档 https://s0www0elastic0co.icopy.site/guide/en/kibana/current/introduction. ...

  7. mybatis框架-resultMap的自动映射级别-partial 和full的探讨

    现在我们做一个小实验,输出一下上一个案例中没有匹配的属性,注意哦,现在user类中是有内部嵌套的复杂数据类型的 运行结果: 注意到:现在居然连userPassword都打印不出来了,原因就是user类 ...

  8. MacOS下IDEA设置智能提示不区分大小写

    本文只针对,IDEA-2019.2.3版本 目录地址: Edit -> General -> Code Completion -> Match case -> 勾选去掉 截图如 ...

  9. C语言实现Socket简单通信

    环境是linux,不过应该没什么影响,因为只用到了socket的基本用法,没有涉及pthread等. 分为服务器端和客户端,服务器端监听端口发来的请求,收到后向客户端发送一个Hello World,客 ...

  10. CSS3实现PS中的蚁行线动画以及画布的马赛克背景图

    话不多说,先看例子,外链 效果截图如下: 蚁行线 马赛克背景 代码: 蚁行线代码如下: /* <!-- HTML代码 --> <div class="ant"&g ...