html5父子页面数据传递,使用iframe标签嵌套页面时 如何进行父子页面通讯/传值...

news2024/2/27 14:24:33

父页面使用iframe标签引入子页面 (使用本地文件)

父页面

function myFunction(e) {

console.log("我是父页面的方法")

}

引入本地路径的页面符合同根同源策略 是不会存在跨域的 但是有一点需要注意的是  需要部署到web服务器使用  不支持本地file协议打开

(本地直接打开的话  依然会报跨域的错误 :Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.)

如果子页面调用父页面的 myFunction  直接在子页面写:

parent.myFunction();

//控制台输出:我是父页面的方法

也可以带参调用//父页面方法

function myFunction(e) {

console.log("我是父页面的方法")

}

//子页面调用

parent.myFunction("带带弟弟吧");

//控制台输出:带带弟弟吧

如果使用的不是本地路径 而是第网址路径的话  像这样:

当你子页面调用父页面的myFunction() 方法时   就会造成跨域 报错:

child.htmlUncaught DOMException: Blocked a frame with origin "https://www.*******.com" from accessing a cross-origin frame.

at palyEnd (https://www.*****.com/child.html:83:20)

at HTMLVideoElement.onended (https://www.********.com/child.html:1:1)

这个时候可以时候  window.postMessage 这个方法  , 它可以绕过同域限制实现跨域通信  用官方来讲它的格式如下:targetWindow.postMessage(message, targetURL[, transferObject]);

参数一为要发送的数据  可以是字符串 可以使 数组 也可以是对象

参数二为发送数据的目标地址 目标窗口的协议 主机地址或端口 指定数据发送至该目标  通俗来讲就是子页面的地址 出于安全考虑 用于确认发送给谁的  (简单粗暴可以直接写 “ * ” 号   代表允许所有地址接收我的数据)/**子页面发送数据给父页面*****/

//数据格式为字符串

parent.postMessage('带带弟弟吧','*');

//数据格式为对象

parent.postMessage({name: '我是枫枫呀',age:17},'*');

子页面数据发送给父页面之后   父页面需要监听message事件来获取到子页面传来的数据

/**父页面监听子页面传来的数据 并进行接收****/

window.addEventListener("message", function(e) {

// 打印子页面传来的数据

console.log(e.data)

}, false);

----------------------更为严谨的写法-----------------------

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";

var eventer = window[eventMethod];

var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function (e) {

// 打印子页面传来的数据

console.log(e.data)

}, false);

//如果出于安全考虑 需要验证目标地址是否为发送数据的地址

//比如这样发送的:

//parent.postMessage('带带弟弟吧','http://www.linfengya.cn');

//那么接收时候我们要加一个验证

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";

var eventer = window[eventMethod];

var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function (e) {

//如果本地址非数据发送规定地址 就直接return出去

if (event.origin !== "http://www.linfengya.cn") return;

// 打印子页面传来的数据

console.log(e.data)

}, false);

本文最后更新于2020-5-8,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

分享到:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.cn/news/show-326068.html

如若内容造成侵权/违法违规/事实不符,请联系七分地网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构中常见的树(BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B+树、B*树)

原文:http://blog.csdn.net/sup_heaven/article/details/39313731 数据结构中常见的树(BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B树、B*树) 转载 2014年09月16日 12:07:0827624 BST树 即二叉搜索树: 1.所有非叶子结点至…

html载入字体,css怎么导入字体?

在做前端页面的时候,有些内容文字需要通过css来指定第三方的字体进行显示,而不是默认支持的一些字体,这就需要自己制作或者获得字体文件,然后放入对应的字体目录,并通过font-family来指定字体。在 CSS3 之前&#xff0…

奇异值的物理意义

知乎上的解释特别好,非常佩服,在此转载一下,做个笔记 原文:https://www.zhihu.com/question/22237507/answer/28007137 奇异值作用:图片压缩,去燥,模糊等等矩阵的奇异值是一个数学意义上的概念…

mabatisplus怎么给实体类自定义属性_如果你的角色属性可以自定义,你会怎么点?...

如今越来越多的人抱怨小时候学的一些特长,长大之后根本没什么用处,比如乐器、绘画等等。反而是一些实用的比如烹饪和动手能力更受到大家的欢迎。阿庆想说的是,你肯定是没有坚持,到最后自然只能像方仲永一样“泯然众人矣”了。在游…

selector多路复用_超详细的I/O多路复用概念、常用I/O模型、系统调用等介绍

概述当我们要编写一个echo服务器程序的时候,需要对用户从标准输入键入的交互命令做出响应。在这种情况下,服务器必须响应两个相互独立的I/O事件:1)网络客户端发起网络连接请求,2)用户在键盘上键入命令行。我们先等待哪个事件呢&am…

余弦计算相似度度量

目录 pytorch 余弦相似度, 余弦计算相似度度量 pytorch 余弦相似度, 余弦相似度1到-1之间,1代表正相关,0代表不相关,-1代表负相关 def l2_norm(input, axis1):norm torch.norm(input, 2, axis, True)output torc…

程序员表白简短html代码,【杂谈】2018浪漫七夕:7款程序员必备表白源码(超炫酷)...

2018七夕将要来临,ki4网给大家准备了七款程序员表白专用源码,让你可以一举俘获美人心,下面就来看一看这七款表白代码大全,包含html、html5、CSS、JQ编写的一些非常简单实用的表白代码,非常炫酷、浪漫!1、CS…

哪种css实现方式优势更突出_【第十三课】更合理的CSS结构

前言从零开始学前端系列课程,与传统的视频大课堂教学不同,没有填鸭;也普通做练习题的方式不同,没有假想的模拟题。 本课程拆出80个左右必须掌握的技能点,并对其分组,从易到难地列出学习曲线。同时从真实项目…

TF-IDF与余弦相似性的应用

原文:http://www.ruanyifeng.com/blog/2013/03/tf-idf.html TF-IDF与余弦相似性的应用(一):自动提取关键词 这个标题看上去好像很复杂,其实我要谈的是一个很简单的问题。 有一篇很长的文章,我要用计算机提取…

webloigc12服务启动不了_一键启动知多少!

一键启动(自动挡车型)相比对手动挡的钥匙启动高大上不会出现膝盖被钥匙磕到的情况也不会出现钥匙孔边上有划痕的现象但是一键启动开关启动的顺序是什么?是长按至启动还是通电后再启动?一键启动常见问题答疑■ 问:一键启动车辆是如何启动的&a…

机器学习算法之决策树

原文:http://www.jianshu.com/p/6eecdeee5012 决策树是一种简单高效并且具有强解释性的模型,广泛应用于数据分析领域。其本质是一颗由多个判断节点组成的树,如: 决策树在使用模型进行预测时,根据输入参数依次在各个判断…

组件三层_Angular 练级之旅(8)-Zorro Select组件的实现和进阶

很久没写相关的文章,正好前两天把抄来的Select组件重写了一下,简化了一些逻辑。先看下zorro 中select组件的一个目录结构zorro将select组件分成了 三大块Input / 选择框下拉列表连接以上2层的控制器层先看 我们使用的 nz-select 内部的模板到底是什么样的…

目标检测 RCNN算法详解

原文:http://blog.csdn.net/shenxiaolu1984/article/details/51066975 【目标检测】RCNN算法详解 Girshick, Ross, et al. “Rich feature hierarchies for accurate object detection and semantic segmentation.” Proceedings of the IEEE conference on comput…

燕赵志愿云如何认证_如何获得云安全专家CCSP认证

关注↑↑↑我们获得更多精彩内容!千呼万唤始出来,云安全专家CCSP认证正式上线,全文皆重点,请仔细查看。CCSP云安全专家认证是什么?两家国际顶尖的安全组织,云安全联盟Cloud Security Alliance与 (ISC),在20…

替代方法_ASD干预:替代行为的正确使用方法和注意事项

在我们的日常干预中,孤独症的儿童的行为问题一直是我们干预的一个重点,和普通的儿童不一样,自闭症孩子由于其认知和社交方面的障碍,都会采取很多的"不恰当行为"来表达自己的不满和需求,比如尖叫,…

长沙医学院计算机系怎么样,长沙医学院有哪些专业及什么专业好

本文讲述了长沙医学院最新的专业介绍,主要包含长沙医学院有哪些专业及每个专业的收费标准、长沙医学院都有什么专业比较好等,更多信息请访问大学高考。本文目录:长沙医学院什么专业好长沙医学院比较好的专业有:临床医学、中医学、…

goahead如何使用cgi服务_北斗导航系统现已提供全球服务!你知道如何使用这个服务吗?...

在11月份的时候,我国传来了一个好消息,北斗导航全球组网成功!这意味着我国23年的努力没有白费,取得了圆满的成功。此项研究成果也迅速让中国的国际地位提高,很多国家都想和我们谈生意,一起参加北斗导航系统…

fullcalendar 显示的时间间隔只有四十五分钟_Linux命令行监控程序,还能实时高亮显示差异,我就选它了...

引言watch用于定期运行任意命令,并在终端窗口上显示该命令的输出。当你必须重复执行命令并观察命令输出随时间变化时,它非常有用。例如,可以使用watch命令来监视系统正常运行时间或磁盘使用情况。watch程序是procps(或procps-ng)软件包的一部…

计算机快速看图教程,CAD快速看图使用电脑版软件操作教程

下面给大家介绍一个非常好用的操作方法,能够解决大家在CAD快速看图、编辑与修改、格式转换、版本转换等问题。拿到图纸都能够打开浏览,转换成可以转换的文件格式,发送给客户都可以。1我们可以上网搜索,CAD快速看图或CAD编辑器&…

计算机考试不用输入扩展名吗,本周末的 计算机等级考试,如果不想考0分,一定要花2分钟看完...

原标题:本周末的 计算机等级考试,如果不想考0分,一定要花2分钟看完嗨喽~下午好!我是超甜的小虎泰戈尔的爱情诗《世上最远的距离》里有一段“世上最远的距离不是生与死的距离,而是我站在你面前你不知道我爱你。”现在对…