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. python如何以表格形式打印输出

    好久不见,风水轮流转,我竟然写写写python了 近日有个小需求,要求收集统计一些信息上报,并直接在后台控制台打印,写入日志 为了美观,需要以表格形式展现数据,形如 虽说可以用 prettytable ...

  2. this(this的4种指向和改变this指向的方式)

    this是Javascript语言的一个关键字. 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 1.this指向的形式4种 a.如果是 ...

  3. vue+element 根据内容计算单元格的宽度

    需求是这样的,之前我也写过,就是前端渲染的表格数据是动态渲染表格的行和列, 那么就必然出现了一个问题,当列超过一定的个数的时候,会出现横向滚动条, 那么怎么让表格整体看起来自然协调一些呢,老大要求表格 ...

  4. JVM Code Cache空间不足，导致服务性能变慢

    本文阅读时间大约5分钟. 有业务反馈,线上一个应用运行了一段时间之后,在高峰期之后,突然发现处理能力下降,接口的响应时间变长,但是看Cat上的GC数据,一切都很正常. 通过跳板机上机器查看日志,发现一 ...

  5. Linux shell 函数应用示例02

    nginx服务控制脚本: 安装ngix [root@wei function]# yum install gcc pcre-devel openssl-devel [root@wei function ...

  6. Linux上搭建SVN服务

    环境:centos7 一.搭建svn服务 1. 安装svn yum -y install subversion 2. 创建一个目录作为svn服务的地址(svn://192.168.0.2:3690 访 ...

  7. Nginx七层负载均衡的几种调度算法

      Nginx是一款轻量级的高性能web服务器,同时也是一款非常优秀的负载均衡器和反向代理服务器.由于支持强大的正则匹配规则.动静分离.URLrewrite功能及安装配置简单且对网络稳定性依赖非常小等 ...

  8. LAMP架构性能测试+php优化

     性能测试:1. 首先查看一下服务器的硬件性能free  -m  ---->查看一下内存的情况lscpu或者cat  /proc/cpuinfo     ------à查看一下cpu的情况2.  ...

  9. Jmeter（四十四）启动提示 Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5.

    有已知的已知:有些事情我们自己知道自己知道: 我们也知道有已知的未知:这是指我们知道有些事情自己不知道: 但是还有未知的未知:有些事情我们不知道自己不知道:   ---美国国防部长 唐纳德·拉姆斯菲尔 ...

  10. Open Physics

    1.开放物理计划. 开放物理计划,英文Open Physics.是AMD公司为自己的3A平台打造的物理模拟计算平台,以OpenCL为基础,由CPU+GPU联合计算完成.所谓“开放”,是指参与这个计划的 ...