父页面通过ifarame传递参数

有些时候，我们需要在嵌套页面。

我们就需要使用iframe了。

通过iframe传递参数给子页面。

需求描述，当我们点击按钮的时候。

传递参数给子页面。子页面接受后展示出来。

我们使用postMessage() 方法用于安全地实现跨源通信。

otherWindow.postMessage(message, targetOrigin, [transfer]);

第一个参数你传递的消息

第二个参数你传递的地址。(其值可以是 *（表示无限制）或者一个 URI)

第三个参数transfer可选，是一串和 message 同时传递的 Transferable 对象。

这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

父页面传递参数

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>父页面给子页面传递参数</title>

    <style>

        html,

        body {

            height: 100%;

        }

    </style>

</head>

<body>

    <div>

        <input id="text" type="text" value="Runoob" />

        <button id="sendMessage">发送消息</button>

    </div>

    <iframe id="receiver" src="http://127.0.0.1:8848/%E7%A5%9E%E5%A5%87%E7%9A%84display/index.html" width="100%" height="100%">

        <p>我是标题</p>

    </iframe>

    <script>

        window.onload = function() {

            //获取iframe窗口的 contentWindow 属性

            var receiver = document.getElementById('receiver').contentWindow;

            console.log('receiver', receiver)

            // 给按钮绑定点击事件

            var btn = document.getElementById('sendMessage');

            btn.addEventListener('click', function(e) {

                // 阻止事件的默认行为

                e.preventDefault();

                var val = document.getElementById('text').value;

                // 传递数据给子页面.是我另外一个服务器的地址[http://127.0.0.1:8848]

                receiver.postMessage("Hello " + val + "！", "http://127.0.0.1:8848");

            });

        }

    </script>

</body>

</html>

子页面接受参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

	#divdemo{

	   background:pink;

	}

    </style>

</head>

<div id="recMessage">

  我是子页面

</div>

</body>

<script>

window.onload = function() {

    var messageEle = document.getElementById('recMessage');

    window.addEventListener('message', function (e) {  // 监听 message 事件

	console.log("e",e)

        alert('消息来自的地址',e.origin);

        if (e.origin !== "http://127.0.0.1:5500") {  // 验证消息来源地址。这个地址是父页面的地址

            return;

        }

        messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;

    });

}

</script>

</html>

iframe父页面传递参数给子页面的更多相关文章

  1. 父页面（JSP页面）传参数到子页面（JSP页面）

    父页面(JSP页面)传参数到子页面(JSP页面) 1.父页面传参数到子页面 //JavaScript代码 $.ajax({ type:"POST", uri:"../st ...

  2. angular配置路由/子页面+vue配置路由/子页面

    1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同.   routes: [     { path: '/',       ...

  3. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  4. 父页面向iframe子页面传递参数

    父页面: <iframe src="video.html" width="100%" height="400" name=" ...

  5. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  6. JavaScript从父页面获取子页面的值（子页面又如何访问父页面）

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  7. Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参

    Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能 ...

  8. JSP页面传递参数乱码问题整理

    1.JSP页面之间传递中文参数乱码 (1).a.jsp中正常传递参数,b.jsp 中 <% String projectName = new String(request.getParamete ...

  9. 前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数

    A页面 html代码: 姓名:<input type="text" id="name1"> 年龄:<input type="text ...

  10. SpringMVC 接受页面传递参数

    一共是五种传参方式: 一:直接将请求参数名作为Controller中方法的形参 public  String login (String username,String password)   : 解 ...

随机推荐

  1. 跟我学Python图像处理丨5种图像阈值化处理及算法对比

    摘要:本篇文章主要讲解Python调用OpenCV实现图像阈值化处理操作,包括二进制阈值化.反二进制阈值化.截断阈值化.反阈值化为0.阈值化为0. 本文分享自华为云社区<[Python图像处理] ...

  2. 从原理带你掌握Spring MVC拦截处理器知识

    摘要:SpringWebMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter,用于处理器进行预处理和后处理. 本文分享自华为云社区<不讲废话,全程干货,0基础带你学习Spring ...

  3. 火山引擎DataLeap的Data Catalog系统公有云实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Data Catalog是一种元数据管理的服务,会收集技术元数据,并在其基础上提供更丰富的业务上下文与语义,通常支 ...

  4. Solon 能打出 war 包放到 tomcat 下运行吗？

    Solon 是一个强调自启动的框架,原则上是不推荐 war 容器运行的,但总会有些甲方有硬性规定,或者旧环境不能变. 1.操作指南: 在普通项目增加几项内容即可打 war 包(仍可打 jar 包): ...

  5. Axure 多平台自适应

    步骤一:设置自适应视图 1.新建两个页面分别命名为"PC版"和"移动版" 2.启动自适应视图: 条件为大于等于,宽为1024,继承于基本视图3.新建自适应视图& ...

  6. 大数据 - DWD&DIM 行为数据

    我们前面采集的日志数据已经保存到 Kafka 中,作为日志数据的 ODS 层,从 Kafka 的ODS 层读取的日志数据分为 3 类, 页面日志.启动日志和曝光日志.这三类数据虽然都是用户行为数据,但 ...

  7. cxf 动态调用 WebService No compiler detected, make sure you are running on top of a JDK instead of a JRE

    WebService cxf No compiler detected, make sure you are running on top of a JDK instead of a JRE [202 ...

  8. Treap（平衡树）

    Treap 前置芝士 二叉搜索树(BST),见 BST. 平衡二叉树(AVL). 先来介绍一下平衡二叉树. 背景 BST 出现以后,人们很快发现一个问题,当其维护一个有序序列时,很可能会退化成链.如图 ...

  9. Mac下Homebrew替换镜像

    替换git和homebrew镜像源 一.git加速 查找域名对应的地址 nslookup github.com nslookup github.global.ssl.fastly.Net 修改host ...

  10. Java 网络编程 —— ServerSocket 详解

    构造 ServerSocket ServerSocket 的构造方法有以下几种重载形式 ServerSocket() throws IOException ServerSocket(int port) ...