iframe父页面传递参数给子页面
父页面通过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父页面传递参数给子页面的更多相关文章
- 父页面（JSP页面）传参数到子页面（JSP页面）
父页面(JSP页面)传参数到子页面(JSP页面) 1.父页面传参数到子页面 //JavaScript代码 $.ajax({ type:"POST", uri:"../st ...
- angular配置路由/子页面+vue配置路由/子页面
1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同. routes: [ { path: '/', ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- 父页面向iframe子页面传递参数
父页面: <iframe src="video.html" width="100%" height="400" name=" ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- JavaScript从父页面获取子页面的值（子页面又如何访问父页面）
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
- Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参
Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能 ...
- JSP页面传递参数乱码问题整理
1.JSP页面之间传递中文参数乱码 (1).a.jsp中正常传递参数,b.jsp 中 <% String projectName = new String(request.getParamete ...
- 前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数
A页面 html代码: 姓名:<input type="text" id="name1"> 年龄:<input type="text ...
- SpringMVC 接受页面传递参数
一共是五种传参方式: 一:直接将请求参数名作为Controller中方法的形参 public String login (String username,String password) : 解 ...
随机推荐
- 字节跳动基于Doris的湖仓分析探索实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Doris简介 Doris是一种MPP架构的分析型数据库,主要面向多维分析,数据报表,用户画像分析等场景.自带分析 ...
- 一文读懂火山引擎数智平台 VeDI 新品——管理驾驶舱 Plus
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 4 月 18 日,2023 春季火山引擎 FORCE 原动力大会在上海举行,火山引擎发布数智平台(VeDI)新品- ...
- 对话 BitSail Contributor | 吴畅：从好奇，到深入
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 2022 年 10 月,字节跳动 BitSail 数据引擎正式开源.同期,社区推出 Contributor 激励计 ...
- 比文件操作os库更优异的标准库pathlib
pathlib 库从 python3.4 开始作为内置库,到 python3.6 已经比较成熟.相比于老式的 os.path 有几个优势: 老的路径操作函数管理比较混乱,有的是导入 os, 有的又是在 ...
- 台大李宏毅机器学习公开课2020版登陆B站
课程简介: 真正大师的课程往往都是免费的,诸如吴恩达,李飞飞等.不过大家应该对李宏毅老师也不陌生吧?很多机器学习初学者,首选李宏毅老师.毕竟中文授课,而且他讲课通俗易懂.课程案例生动有趣(还记得宝可梦 ...
- 【JAVA基础】事务管理
@Transactional 注解的属性介绍 @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.cl ...
- Python 在VSCode中使用
PyCharm到期了,所以打算换成VS Code(宇宙最好用编辑器?)试一试.但是下载之后不太会配置,网上不少的文章也比较旧了,所以打算自己看着官方教程配置一下.(VSCode版本:1.49.2,Py ...
- distributor和gateway联合实现出中继的负载均衡+故障转移
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 在之前的文章,我们介绍过distributor模块实现多线路分发的配置方法,但是当线路发生故障时,distributor并不会自动跳 ...
- zzuli 1907: 小火山的宝藏收益
***题意:中文的 做法:邻接表+DFS,就相当于搜一棵树,比较一下当前结点得到的宝藏多还是子树下面得到的宝藏多,仔细想想就是水题*** #include<iostream> #inclu ...
- python global函数的使用
1.在全局变量与局部变量均存在时自定义的函数优先使用局部变量,自定义函数并不能改变全局变量的值. 查看运行结果: 2.在没有局部变量时,使用全局变量,且函数内部不能改变全局变量的值 查看运行结果: ...