javascript父、子页面交互小结
帧用来存放子页面,既可以是iframe,又可以是frameset。window对象是全局对象,页面上的一切函数和对象都在它的作用域里。
1、parent代表父窗口、如果父窗口又存在若干层嵌套,则top代表顶级父窗口。
self代表窗口自身。
- if(self==top){//}判断窗口是否处于顶级
- if(self==parent){}//也可以
2.1、父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了。
帧最好设置name属性,这样操作最方便。如
- <iframe name="test" src="child.html"></iframe>
假如要获取child.html里面id为'menu'的元素,则可以这样写:
- window.frames["test"].document.getElementById('menu');
- //由于所有的函数都存放在window对象里面,可去掉开头的window:
- frames["test"].document.getElementById('menu');
- //在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写:
- test.document.getElementById('menu');
2.2 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里,同上,关键是获取该对象。
- //假如child.html定义了showMesg函数,需要在父中调用,则这样写
- window.frames['test'].showMesg();
- //简写形式
- test.showMesg();
- //同理,对象也是如此访问
- alert(test.person);
2.3 其他获取document的方式。
先使用'document.getElementById()'或'document.getElementsByTagName()'把帧作为document下的Element获取,然后访问其属性contentDocument/contentWindow (iframe、frame特有),其中第一个ie7-不支持,第二个chrome不支持.
- <iframe id="testId" src="child.html"></iframe>
- //======
- var doc=document.getElementById('testId');
- //或者
- var doc=document.getElementsByTagName('iframe')[0];
- 然后
- var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一
- if(winOrdoc.document)winOrdoc=winOrdoc.document;
- winOrdoc.getElementById('menu');
- //如果需要window对象,则这样写:
- if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;
3.1子页面访问父页面元素。思路同2.1,先获取父窗口window.document对象.
- parent.window.document.getElementById('parentMenu');
- //简写
- parent.document.getElementById('parentMenu');
3.2,子页面访问父页面函数或对象。思路同2.2,先获取父窗口window对象。
- parent.parentFunction();
最后提一下js的同源策略,即位于A网站的js代码不允许访问位于B网站的内容,即使该代码来源于B网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。
javascript父、子页面交互小结的更多相关文章
- javascript控制子页面对父页面控件操作
//赋值 window.parent.document.getElementById("partyid_trade_edit").value = data.data.partyid ...
- AppBox v6.0中实现子页面和父页面的复杂交互
前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...
- JavaScript从父页面获取子页面的值(子页面又如何访问父页面)
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- IFrame父页面和子页面的交互
现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- javascript中父、子页面间调用
本文主要转自:http://www.360doc.com/content/11/0525/17/6161903_119333834.shtml http://zh ...
- iframe父页面与子页面的交互
iframe子页面调用父页面的变量.js方法.元素(非跨域): window.parent.varName; //获取父页面js全局变量 window.parent.fnName; //获取父页面js ...
- 父页面操作iframe子页面的安全漏洞及跨域限制问题
一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...
随机推荐
- C#应用视频教程2.4 OPENGL虚拟仿真介绍
这一部分我们首先实现视图控制(包括了平移/旋转/缩放),前面我们已经讲过,通过lookat一个函数,或者通过translate+rotate两个函数,都能实现视图的控制(两个函数的方式比较简单,但是通 ...
- C#基础视频教程5.3 如何编写简单的超级热键
跟前面一章讲解计算器一样,到最后一小节,我们总是要把代码规整好,让整个程序显得非常简洁,先做个文件夹把我们自定义的类库都放进去 然后我们开始整理Form1里面的代码,为了实现超级热键的功能,我们应 ...
- android 线程安全
android ui 不是线程安全的,所以不能在子线程里更新ui,必须到主线程里更新
- 设计模式之Programming to an Interface, not anImplementation 程序指向接口,而不是实现
Class inheritance is basically just a mechanism for extending an application's functionality by reus ...
- (转)更新Java final常量后,请重新编译你的class
程序中使用的各种常量用一个类来统一管理,类似: public class AppConst { public static final String STR_1 = "String1&quo ...
- itext处理pdf
http://www.java2s.com/Tutorial/Java/0419__PDF/DecryptPdffile.htm
- Xcode 打包 ipa 包
原地址:http://zengwu3915.blog.163.com/blog/static/27834897201362831449893/ 上次介绍了木有证书的打包ipa.如果安装证书后,我们还有 ...
- 算法笔记_146:TarJan算法的应用(Java)
目录 1 问题描述 2 解决方案 1 问题描述 Problem Description 为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M& ...
- Event sender
Sometimes it is convenient to know which widget is the sender of a signal. For this, PyQt4 has these ...
- react 中使用 lodash 中的 _.throttle
1.场景: 首次调用执行一次,一定时间内再次调用,不再执行. 2.实现 debounce (函数去抖) 多次触发,只在最后一次触发时,执行目标函数. _.debounce(func, [wait=0] ...