iframe中父与子页面访问权限问题_iframe父子页面权限_夭肃之峰的博客-程序员秘密

技术标签: 对象  dom  html  iframe  

一、同域

方法调用
父页面调用子页面方法:FrameName.window.childMethod();
子页面调用父页面方法:parent.window.parentMethod();
DOM元素访问
获取到页面的window.document对象后,即可访问DOM元素


注意事项

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:
1. iframe上用onload事件
2. 用document.readyState=="complete"来判断

二、跨域

父页面向子页面传递数据
实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:
1. 在子页面中通过setInterval方法设置定时器,监听location.href的变化即可获得上面的data信息
2. 然后子页面根据这个data信息进行相应的逻辑处理


子页面向父页面传递数据
实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/l583429595/article/details/51645527

智能推荐

struts2.5框架使用通配符指定方法(常见错误)_strtus2.5.30 通配符_CoderLim的博客-程序员秘密

struts2.5框架使用通配符指定方法(常见错误)@(Java问题解决记录)struts25框架使用通配符指定方法常见错误一问题描述二尝试的无效方法三各配置的具体配置解决方法一、问题描述昨天使用struts2.5做人员管理系统的练习时候,遇到一个错误,怎么都解决不好,一直报错: Struts has detected an unhandled exception: Messag

CPU使用率过高应该如何处理_内核态cpu利用率高_四五又十的博客-程序员秘密

CPU使用率如何计算的CPU使用率是单位时间内CPU使用情况的统计,以百分比的方式展示,而其中有一个重要的点是单位时间,那么在CPU中时间是怎么计算的呢?Linux是一个多任务操作系统,将每个CPU时间划分为很短的时间片,然后通过调度器分配给各个任务使用,因此造成多任务同时运行的错觉,为了维护CPU时间,Linux通过事先定义的节拍率(内核中表示为HZ),触发时间中断,并且使用全局变量Jiffies记录开机以来的节拍数,每发生一次时间中断,Jiffies的值就加1。节拍率HZ是内核的可以配置的选项,可以

fasttext整体介绍_SeaSky_Steven的博客-程序员秘密

Word2vec, Fasttext, Glove, Elmo, Bert, Flair pre-train Word Embedding源码+数据Github网址: 词向量预训练实现GithubfastText原理篇一、fastText简介fastText是一个快速文本分类算法,与基于神经网络的分类算法相比有两大优点:1、fastText在保持高精度的情况下加快了训练速度和测试速度...

Android:访问存储失败.FileNotFoundException open failed: XXXXXXX EPERM (Operation not permitted)_android 12 外部存储无法访问_ImGamerX的博客-程序员秘密

Android:访问存储失败.FileNotFoundException open failed: XXXXXXX EPERM (Operation not permitted)设备/引擎:Mac(11.6)/cocos开发工具:Android studio(4.1.2)开发语言:c++/java开发需求:保存图片到手机相册失败:访问权限失败...

基于C#进行AutoCAD二次开发初探(一)——调用dll库_调用dll进行autocad二次开发_cfttony的博客-程序员秘密

自己是测绘行业,不可避免要跟CAD打交道。因为之前用C#写了一个小软件,希望能够自动调用CAD画等高线,所以想基于C#进行Autocad的二次开发。但自己在此方面真的是零基础菜鸟一只。搜了大量的资料,但感觉入门还是很难。在网上找了一个入门级的开发案例,但搞了大半天,费了好大的劲儿才成功。虽然这对于老手而言是不值一提的小事,但对于我来说也是一个重要的开端吧。      CSDN上的某位前辈的一篇...

数据结构能力自测_b10l07的博客-程序员秘密

原文: 作为一个程序员,你需要对自己的数据结构能力有一个全面而清醒的了解,请看下面的这些关键字,每遇到一个熟悉的可以加1分,遇到一个知道名字单不知道确切内容的加0.5分,遇到不知道的加0分,抽象数据类新,文字型,数组,局部变量,B树,查找表,位图,指针,布尔值,队,字符变量,记录,常量,回溯,双精度,集合,枚举流,堆栈,浮点,字符串,散列表,结构化变量,堆,树,索引,联合,整型,数值链,链...

随便推点

php中的字符串常用函数 str_replace 字符串替换,替换全角空格_天为我蓝的博客-程序员秘密

1 <?php2 $str = "hello world!";3 echo(str_replace(array('hello', 'world'), array('tom', 'class'), $str);4 //输出结果:tom class!5 6 $str2 = "hello world!";7 echo(str_replace('hello', 'cat'...

wrx权限_weixin_34296641的博客-程序员秘密

文件权限-wrxwrxwrx -文件类型、w:写、r读、x执行。第一个wrx代表文件所有者权限。第二个wrx代表文件同组的其他用户权限。第三个wrx代表文件其他组的用户权限。本文转自 天涯飞客 51CTO博客,原文链接:http://blog.51cto.com/425093014/1023832,如需转载请...

足球数据【队伍资料】API调用示例代码_crooked8的博客-程序员秘密

野子电竞数据官网改版https://www.xxe.io/全新登场import javax.xml.bind.JAXBContext;import javax.xml.bind.Unmarshaller;import javax.xml.bind.annotation.XmlElement;import javax.xml.bind.annotation.XmlRootElement;i...

git使用-如何将本地文件上传到git远程指定分支下_小脚丫的博客-程序员秘密

git使用-如何将本地文件上传到git远程指定分支下前景:在做项目中将自己的写好的代码上传到指定的git远程仓库自己创建的分支下做简单总结,亲测方便有效。(前提是这个文件是自己在pycharm创建书写的没有上传到过git)二、 操作步骤1.重新在某一根目录下创建空文件夹,克隆远程仓库到这个空文件夹上克隆的时候是在空文件夹上右击bash2.将需要上传的本地文件复制到克隆下来的这个文件夹内部3.在克隆下来的这个文件夹下右击bash操作具体的命令355 git branch

MFC窗口风格 WS Window Styles中文说明及在c#中的定义使用_c# ws_visible_微wx笑的博客-程序员秘密

窗口风格(Window style)WS_BORDER 有边框窗口 WS_CAPTION 必须和WS_BORDER风格配合,但不能与WS_DLGFRAME风格一起使用。指示窗口包含标题要部分。 WS_CHILD 说明窗口为子窗口,不能应用于弹出式窗口风格(WS_POPUP)。 WS_CHILDWINDOW 同WS_CHILD。 WS_CLIPCHILDREN 绘制父窗口时

使用Express和Sequelize创建动态的RESTful API_weixin_26752759的博客-程序员秘密

使用Express和Sequelize创建动态RESTful API (Creating a dynamic RESTful API using Express and Sequelize) API是什么,RESTful意味着什么,以及如何使用Node.js来实现这些API (What an API is, what it means to be RESTful, and how to imp...

推荐文章

热门文章

相关标签