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) : 解 ...
随机推荐
- 【CVPR2022】用于域适应语义分割的域无关先验
摘要:本文给大家分享一篇我们在CVPR 2022 上发表的paper:Domain-Agnostic Prior for Transfer Semantic Segmentation.文章提出了一种图 ...
- JS引擎(0):JavaScript引擎群雄演义—起底JavaScript引擎
JavaScript 既是一个 面向过程的语言 又是一个 面向对象的语言.在 JavaScript 中,通过在运行时给空对象附加方法和属性来创建对象,与编译语言如 C++ 和 Java 中常见的通过语 ...
- 火山引擎DataLeap：助你实现从数据研发1.0到数据研发3.0的跨越
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎开发者社区 Meetup 第 12 期暨超话数据专场在深圳举办,本次活动主题为"数智化转型 ...
- 火山引擎DataTester：企业如何使用A/B实验优化商业化能力
商业化是企业将研发成果,如新产品.新技术.新服务等,转变成可盈利的商业化产品:整个流程中包含了研发.推广.服务,全程通过精细化管理运营.商业化的本质是流量的变现,而对企业而言,商业化链路的打磨至关 ...
- 还在用 Excel 和 SQL？火山引擎 VeDI 这款产品帮你更快处理数据
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 对大多数职场打工人来说,看数据.用数据一直是项有"门槛"的工作. 特别是在企业业务快速发展的背景下,为 ...
- docker-compose部署SpringCloud
1.安装 docker-compose 将 docker-compose-Linux-x86_64 传到 /usr/local/bin 目录下,并改名为 docker-compose 2.设置权限 ...
- DevEco中被忽略的实用功能
近期,我一直在业余时间研究纯血鸿蒙(HarmonyOS)App的开发,所使用的IDE是华为官方的DevEco Studio 3.1.1. 随着使用时间的增长,我发现了几个特别容易被忽略,但又特别实用的 ...
- CNCF大使预测：2024年云原生面临倦怠、离职及云成本精简
本文由 CNCF 大使 Eric D. Schabell 撰写,预测2024年云原生领域最可能发生的3大变化,并与其对云原生可观测性领域的见解结合. 关注云原生倦怠 毫无疑问,在 2023 年中云原生 ...
- 数据探索之道：查询Web API数据中的JSON字符串列
前言 在当今数据驱动的时代,对数据进行探索和分析变得愈发关键.Web API作为广泛应用的数据源,提供了丰富的信息和资源.然而,面对包含JSON字符串列的Web API数据时,我们常常遇到一个挑战:如 ...
- AcWing 第五场周赛
比赛链接:Here AcWing 3726. 调整数组 签到题 void solve() { int n; cin >> n; int x = 0, y = 1, c; for (int ...