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. PHP错误日志相关

    https://cloud.tencent.com/developer/article/1167951   php错误日志总结 https://cloud.tencent.com/developer/ ...

  2. 自动居中标题和内容；aspxgridview允许定义两个关键字为主键的格式

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. CSS泣鬼神

    博主网站 一.CSS介绍和语法 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明 ...

  4. Spring boot配置MongoDB以及Morphia踩坑记录

    pom 因为项目中采用Morphia(MongoDB的ODM框架,对象-文档映射(object-document mapper)),因此需要在pom文件中引入相应依赖: <dependency& ...

  5. Python之路(第四十五篇)线程Event事件、 条件Condition、定时器Timer、线程queue

    一.事件Event Event(事件):事件处理的机制:全局定义了一个内置标志Flag,如果Flag值为 False,那么当程序执行 event.wait方法时就会阻塞,如果Flag值为True,那么 ...

  6. IDEA 设置（中文乱码、svn、热部署、ideolog 、Jrebel ）

    目录 console中文乱码 idea 多个工程分别设置svn idea svn忽略版本控制 idea svn客户端 ideolog 插件配置 idea 热部署 Jrebel 插件激活和使用 # I ...

  7. Bash Shell中的特殊位置变量及其应用

    Bash Shell中的特殊位置变量及其应用 众所周知bash shell中有许多特殊的位置变量,灵活使用它们可以更好地发挥Shell脚本的功用. 即位置变量:$1,$2,...来表示,用于让脚本在脚 ...

  8. 剑指offer-08 二叉树的下一个节点

    剑指offer第8题,本来想找leetcode上对应的题,后来没找到,直接去牛客网上刷了. 题目描述: 给定一个二叉树和其中的一个结点(pNode),请找出中序遍历顺序的下一个结点并且返回.注意,树中 ...

  9. 嵌入式linux开发uboot启动内核的机制(二)

    一.嵌入式系统的分区 嵌入式系统部署在Flash设备上时,对于不同SoC和Flash设备,bootloader.kernel.rootfs的分区是不同的.三星S5PV210规定启动设备的分区方案如下: ...

  10. 第二阶段冲刺（个人）——four

    今天的的计划:选择功能界面的背景设计,使得整体效果看上去吸引眼球. 昨天做了什么?选择功能界面的选择框排版设计. 遇到的困难: 还是js的函数 设计,思路不是很清晰.