帧用来存放子页面,既可以是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网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。
分享到:
相关推荐
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <...
本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法(含JS、JQuery方法)
本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本。 还可点击此处本...
对于Iframe的父窗体与子窗体互相传值
Iframe交互语法 Iframe交互语法 Iframe交互语法
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
首先在父页面的javascript给定义一个window.name,并赋予一个字符串值,如window.name="test",其中赋予的字符串值可以随意定义,然后在Iframe页面的Form 标签中定义target属性,并且其值也必须与之前定义的window....
就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧
JS页面跳转和js对iframe进行页面跳转、刷新
练习说明:使用postMessage可以在iFrame、父子窗口、跨页面等,之间相互传递消息。 你好,我是TKCB-GO,一个有着游戏策划梦想,却沦为程序员的游戏家,这是我的技术博客:www.tkcb.cc 技术博客网站里面,除了我的...
unigui_网页iframe交互_完善_03unigui_网页iframe交互_完善_03
JQUERY实现iframe页面切换功能,轻松简单、灵活方便快速,代码实例,测试通过
iframe弹出框遮罩父类页面,进去之后直接打开demo里面的layout.html 页面看效果,然后查看代码;才方法不需要将子类的js 及弹出框的代码写在父类里面,依旧是写在子类页面里面
以一个简单的小例子讲述了iframe页面中的相互调用,此为iframe页面中又嵌套iframe的页面的例子,希望对大家有帮助
在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的; iframe通信可以分为2种,跨域和非跨域两种.分别说明; 有一点很重要,iframe是可以给name 属性的;给上name ...
Iframe装载在div中,设置iframe的大小。
iframe包含的页面的高度,兼容性好,iframe高度自适应