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. cs1.6 8倍镜

    地图名字包含awp的是狙击场 打开游戏 搜索方法 开镜搜减小,关镜搜增加 分析数据 开关镜,观察数据变动 修改测试 测试结果 类似的:鼠标XY坐标,也是上减下加,左加右减

  2. mysql的常用查询创建命令

    查看所有数据库Show databases;创建数据库Create database 数据库名删除数据库Drop database 数据库名创建表CREATE TABLE t_bookType(   ...

  3. Github清除历史提交，保留最新提交

    有时候,需要启动一个新的分支,同时想摒弃历史信息,那么可以使用下面的方法来实现 #克隆git仓库 git clone [URL] #进入git仓库 cd [仓库名] #创建一个名为 new_branc ...

  4. MySQL索引（九）

    一.索引介绍 1.1 什么是索引 索引就好比一本书的目录,它会让你更快的找到内容. 让获取的数据更有目的性,从而提高数据库检索数据的性能. 分为以下四种: BTREE:B+树索引(基本上都是使用此索引 ...

  5. xampp1.8.3 配置 php5.x 访问 SQL Server 2008

    1.安装xampp 2.下载php sqlsrv扩展 Microsoft Drivers 3.2 for PHP for SQL Server 官方下载地址: http://www.microsoft ...

  6. docker更改默认存储路径

    systemctl stop docker mkdir /data/docker cp -r /var/lib/docker/* /data/docker mv /var/lib/docker /va ...

  7. linux 利用 crontab 实现 程序开机启动/crontab任务的多种实现方法

    方法一,用户登录服务器,直接修改: crontab -e 然后添加: @reboot [nohup] {命令} ctrl + O ctrl + x 方法二,指定用户进行修改: sudo crontab ...

  8. DataOps Reading Notes

    质量.效率.成本.安全,是运维工作核心四要素. AIOps 技术会涉及到数据收集方面的基础监控,服务监控和业务监控,甚至会涉及到与持续交付流水线的数据和状态整合(比如在软件发布的阶段会自动关闭某些监控 ...

  9. 【Linux】netstat命令

    https://www.cnblogs.com/ftl1012/p/netstat.html这个讲的不错 https://www.linuxprobe.com/netstat-common-metho ...

  10. ES6异步操作Promise

    什么是Promise Promise是异步编程的一种解决方案,说白了就是一个构造函数,带有all,reject,resolve这几个方法,圆形上有then,catch等方法 Promise的特点 对象 ...