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. codeforces467-A水题

    题目链接:http://codeforces.com/problemset/problem/467/A A. George and Accommodation time limit per test ...

  2. 15-213 Bomb Lab

    bomb lab是一道学习汇编语言的题,一共有六个阶段,全部解开即可完成 phase_1 0x0000000000400e32 <+>: callq 0x40149e <read_l ...

  3. loj#10172 涂抹果酱 (状压DP)

    题目: #10172. 「一本通 5.4 练习 1」涂抹果酱 解析: 三进制的状压DP 经过简单的打表发现,在\(m=5\)时最多有\(48\)种合法状态 然后就向二进制一样枚举当前状态和上一层的状态 ...

  4. 写给自己的 SOA 和 RPC 理解

    1.SOA SOA(Service-Oriented Architecture)面向服务架构,将应用程序不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来. SOA 不是 ...

  5. docker启动,重启,关闭命令

    docker启动命令,docker重启命令,docker关闭命令 启动        systemctl start docker守护进程重启   sudo systemctl daemon-relo ...

  6. Android 工作流提交审批填写审批意见PopWindow工具类

    公司的项目中几乎都会有走工作流这个环节,为了提高效率,现在特意把弹出的填写审批意见PopWindow改转成工具类,提高效率,免得下次又得整.先看运行效果.

  7. Vim文本编辑器详细用法

    1 Vi.Vim文本编辑器 1．Vi.Vim Vi是Visual interface的简称. Vim是Vi的增强版,即Vi Improved.在后面的实例中将介绍Vim的使用. 为什么学vi? 1)所 ...

  8. msyql常用命令

    1.创建.删除数据库 create database dbname; drop database dbname; 2.选择某一个数据库 use dbname; 3.显示所有表 show tables; ...

  9. offsetWidth的bug

    #div1{width:200px;border:1px solid red;} 这个时候如果用 offsetWidth 提取 #div1 的宽  得到的值是 202: 也就是说 offsetWidt ...

  10. Java XML文档

    概念 XML(EXtensible Markup Language),可扩展标记语言.可扩展就是<>内的东西可以自己定义,可以随便写.标记语言就是加了<>符号的 .HTML是超 ...