父页面通过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. 一文你带快速认识Vue-Router路由

    摘要:Vue Router是Vue.js 官方的路由管理器.它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. 本文分享自华为云社区<Vue-Router路由快速了解与应用 ...

  2. 知道ThreadLocal吗？一起聊聊到底有啥用

    摘要:ThreadLocal是 java 提供的一个方便对象在本线程内不同方法中传递和获取的类.用它定义的变量,仅在本线程中可见和维护,不受其他线程的影响,与其他线程相互隔离. 本文分享自华为云社区& ...

  3. Vue 应用程序性能优化：代码压缩、加密和混淆配置详解

    ​ 简介在 Vue 应用程序的开发中,代码压缩.加密和混淆是优化应用程序性能和提高安全性的重要步骤. Vue CLI 是一个功能强大的开发工具,它提供了方便的配置选项来实现这些功能.本文将介绍如何使用 ...

  4. 不知如何优选达人？火山引擎 VeDI 零售行业解决方案一键解决！

      技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 "人-货匹配"这句营销老话,在直播电商兴起的这几年,似乎不再专指消费者与商品之间的关系. 过去 ...

  5. Docker Jenkins 安装配置

    Docker Jenkins 安装配置 Windows 2016 安装 Jenkins Jenkins + SVN Jenkins + SVN/Git + Maven + Docker + 阿里云镜像 ...

  6. Xml Entity 实体互转（JAXB）

    感觉比 xStream 操作起来复杂些 Xml Entity 实体互转(XStream).但学习成本低些,不需要引用第三方依赖包 需要注意的是 实体中如果加了 getXX 需要在上面加上 @XmlTr ...

  7. 24校招，Moka测试开发工程师一面

    前言 大家好,今天回顾一下楼主当时参加moka测试开发工程师的面试 对其中一些重要问题,我也给出了相应的答案 过程 自我介绍 挑一个项目,详细介绍你在其中担任的职责 如何安排工作的,有什么成果? 回归 ...

  8. ChatExcel?

    大家好,我是章北海mlpy 最近在浅学LangChain,在大模型时代,感觉这玩意很有前途. LangChain是一个开源的应用开发框架,目前支持Python和TypeScript两种编程语言. 它赋 ...

  9. GitLab--简单使用

    1 创建项目组 项目组说明 Private 私有 只有所有者 组内成员或已分配的用户有查看权限(同GitHub收费版的私有仓库) Internal 内部 拥有GitLab账号的成员可以查看 无账号用户 ...

  10. 【JAVA基础】数值处理

    #BigDecimal处理 ##保留两位小数 https://www.cnblogs.com/jpfss/p/8072379.html /** * 保留两位小数 */ @org.junit.Test ...