帧用来存放子页面,既可以是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网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。
分享到:
相关推荐
数据在父子页面间的传递,可以帮助我们实现更复杂的交互逻辑,如在子页面完成某些操作后,将结果反馈给父页面,或者在父页面中设置初始数据,供子页面使用。 常见的数据传递方法有以下几种: 1. URL参数传递:通过...
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题,涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面(Parent Page)**:包含`iframe`...
在父子页面交互中,可以通过`window.opener`对象访问父窗口,实现数据传递。例如,子页面可以修改父页面的某个变量或者调用父页面的函数。这种方式灵活且广泛适用,但需注意跨域安全问题。 `showModalDialog`与`...
layer父子页面交互是指在layer弹出多个iframe窗口中,如何在子页面中访问父页面的元素和函数,如何从子页面执行刷新父页面操作,如何关闭弹出的子页面窗口等问题。 一、访问父页面元素值 在子页面中,可以使用...
Layer弹出子iframe层父子页面传值的实现方法中,主要讲解了如何在使用Layer插件弹出的子iframe中与父页面进行数据传递和方法调用。这一过程对于动态生成的iframe尤为重要,能够帮助开发者实现更加灵活的页面交互功能...
这种情况通常发生在弹出窗口或者iframe中加载子页面时。我们可以通过URL查询字符串或者`window.open()`函数的第二个参数来传递数据。 - **URL查询字符串**:在子页面URL后添加`?key=value`的形式,例如`child....
总结,通过 `Iframe` 实现父子页面的交互主要依赖于 `window.parent` 对象以及各种事件机制。在处理跨域问题时,`postMessage` 是一个可靠的选择。在实际开发中,要确保遵循同源策略,保护用户数据的安全。
本教程将深入讲解如何使用 `Layui` 实现父子页面之间的值传递。 首先,我们需要了解 `Layui` 的基本用法。`Layui` 提供了一个基于 `JavaScript` 的模块化机制,通过 `layui.use()` 方法加载需要的模块,如 `layui....
在网页开发中,HTML父子页面的概念是至关重要的,它涉及到页面间的交互和数据共享。HTML(HyperText Markup Language)是构建网页的基础语言,通过合理的标签结构来组织网页内容。在这个场景下,"父子页面"通常指的...
在IT行业中,尤其是在Web开发领域,经常需要处理页面间的交互问题。标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作,特别是在一个IFrame上下文中。下面将...
这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而,对于跨域的问题,需要通过其他技术手段(如postMessage API)来解决。文章的总结部分提醒我们,虽然这里介绍的技术在同源情况下非常有用...
在进行父子页面通信时,必须注意安全问题。`postMessage`提供了验证`origin`的能力,以防止恶意页面注入数据。同时,由于浏览器的同源策略,跨域通信需要处理跨域资源共享(CORS)设置。 四、应用场景 - 内容嵌入:...
本文将详细介绍如何利用JS对iframe父子页面进行交互。首先,我们要明白的是,只有在同源策略允许的情况下,父子页面才能互相操作,否则会受到浏览器的安全限制。 ### 一、获取iframe中的内容 1. **获取iframe的...
父页面可以通过获取`iframe`元素,并访问其`contentWindow`属性来与子页面进行交互。 ```html <!DOCTYPE html> 父页面 var testVar = "父页面变量"; var childFrame; function getChildVar() { ...
在Web开发中,有时我们需要在父页面与嵌入的iframe子页面之间进行交互,例如获取子页面中的某些参数或控制子页面的行为。以下将详细介绍如何在父页面中获取子页面参数的方法。 首先,你需要在父页面上创建一个`...
这个函数在处理用户交互,比如点击按钮打开新页面,或者在不同窗口间传递数据时非常常见。当我们谈论“window.open父子窗口传值问题”,我们指的是在父窗口通过`window.open`创建了一个子窗口,并需要在两者之间进行...
关于JavaScript操作iframe父子窗体的知识点,本篇内容主要涉及通过JavaScript代码实现父窗口与iframe子窗口间数据的互相访问,以及如何控制子窗口中的内容。以下是详细的内容说明: 1. 父窗口与iframe的交互: 在父...
在网页设计中,有时我们需要实现跨页面的交互功能,例如在一个主页面中包含两个或多个iframe,让这些iframe中的元素可以被拖动并传递信息。本案例中的"主页面实现两个iframe中元素拖动"就是一个典型的跨iframe交互的...
在处理`iframe`时,经常需要进行父子页面间的交互,例如从`iframe`调用父页面的函数或传递数据。下面我们将详细介绍`js`中`iframe`调用父页面方法的相关知识点。 1. **基本调用方式** 在`iframe`中的页面,可以...