子窗口访问父页面iframe中的iframe
子窗口访问最顶层页面中的iframe中的iframe
top打开的子窗口访问父页面中的iframe中的iframe
top打开的子窗口访问最顶层页面中的iframe中的iframe
========================
蕃薯耀 2018年2月5日
http://fanshuyao.iteye.com/
页面情况说明:
页面使用jquery eayui架构,主页是一个普通页面(main页面),然后打开一个tab标签页面(first_iframe页面),tab标签页面中有一个iframe页面(second_iframe页面)。
在second_iframe页面打开一个选择的子窗口(使用top.$("#xxx_id").window("open")打开一个iframe窗口),那么当在子窗口选择完数据后,如何将数据返回到原来的打开窗口中呢?
如果不使用top,则直接使用window.parent应该就可以调用父页面的方法。
由于使用的是top.$("#xxx_id")打开的,已经进入到最外层的页面窗口,需要回去原来的second_iframe页面,则需要一层一层进去,方法如下:
//获取第一层iframe对象 var first_iframe = $(window.parent.document).find("#firstIframeId"); //获取第二层iframe(第一层iframe中的又一个iframe) var second_iframe = $(first_iframe).contents().find("#secondIframeId"); //在第二层iframe中,调用iframe中的方法,方法可带参数param或者不带参数。 //$(second_iframe)[0]后面为什么会有一个[0]呢,我暂时不清楚,但这样是对的。去掉[0]会提示出错。 //callSecondIframeMethod为second_iframe页面中的方法名 $(second_iframe)[0].contentWindow.callSecondIframeMethod(param); //在第二层iframe中,给iframe中的元素赋值。 $(second_iframe).contents().find("#secondIframeElementId").val(elementValue);
========================
蕃薯耀 2018年2月5日
http://fanshuyao.iteye.com/
相关推荐
在网页开发中,有时我们需要实现一个功能,即在iframe中打开一个新的弹出窗口,并且这个弹出窗口能够遮罩住其父级页面,提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...
这可能需要通过`window.parent`或者`window.top`来访问父窗口或顶层窗口的DOM。 5. **绑定事件**:确保在目标iframe中的div也具有拖放功能,或者根据需求添加其他交互事件。 6. **安全性和兼容性**:考虑到浏览器...
本文介绍的JavaScript方法,就是如何在iframe中实现获取父窗口URL地址的过程。这一过程利用了JavaScript中的window.parent对象,它是iframe元素与父窗口之间的桥梁。 首先,理解window对象在JavaScript中的地位非常...
- **数据更新后的页面刷新**:当子窗口完成了一些数据操作,如删除、添加等操作后,需要立即反映在父窗口中。 #### 扩展知识点 1. **`window.opener`与`window.parent`的区别**: - `window.opener`:指的是打开...
- 子窗口访问主窗口:在子窗口的JavaScript代码中,`parent`对象代表了包含它的顶层窗口。例如,`parent.document`可以访问父窗口的DOM。 3. **互相操作DOM** - 从主容器操作子窗口的DOM:获取子窗口的文档对象,...
- `self`对象代表当前窗口,而`top`对象则代表顶层窗口(即没有父窗口的窗口)。 - 如果当前窗口不是顶层窗口,那么使用`top.location.href = self.location.href;`将顶层窗口的URL设置为当前窗口的URL,从而实现了...
在网页设计中,`iframe` 是一种非常有用的元素,它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时,可能会出现重叠或者层级问题,特别是当其中某个 `iframe` 中有一个需要突出显示的 `div` 元素时。...
#### 二、为什么需要让iframe页面跳转到父窗口? 在实际开发过程中,有时候我们需要在`iframe`内部进行操作来影响其外部的页面。例如,当用户在`iframe`内部完成某个操作(如登录验证)后,可能需要返回到父页面...
- 在子页面B中,我们需要首先将想要操作的数据模型(如`vm`)绑定到顶层窗口`window.top`上,使得无论是在哪个层次打开的新窗口都能够访问到这些数据。 ```javascript window.top.vm = vm; // 把vm挂载到顶层窗口...
1. **同源策略限制**:浏览器的同源策略限制了不同源之间的脚本交互,这可能阻止Iframe与父窗口或同一页面内的其他Iframe之间的直接通信,除非它们来源于同一个域名或通过CORS(跨源资源共享)机制允许跨域请求。...
即,子页面通过父页面访问另一个iframe中的内容。具体做法是通过父页面中对应的iframe的name属性或者id属性来获取该iframe的DOM对象,然后调用其contentWindow对象的相应方法。例如,在childPage1.html中调用...
当页面包含嵌套框架时,`top`始终指向最外层的框架集,允许你从嵌套的框架中访问顶层内容。 2. **parent**: `parent`属性则引用当前框架或窗口的父框架。如果当前窗口或框架没有父框架,`parent`就等于`window`。在...
而刷新上级页面(如果当前页面在框架或iframe中)则可以通过`window.parent`属性来访问父级窗口,并结合`document.location.reload()`执行刷新操作。例如,`window.parent.main.document.location.reload()`会刷新名...
父页面可以通过`window.postMessage()`方法向iframe发送消息,而iframe中的内容可以通过监听`message`事件来接收这些消息。反之亦然。 - **window.name属性**:虽然不是设计用来跨域通信的,但window.name属性在...
Iframe(内联框架)是一种HTML页面中可以嵌入另一个HTML...需要注意的是,由于跨域策略的限制,这种高度自适应的方法不能在不同域名之间的Iframe中使用,除非父页面和子页面之间有适当的CORS策略配置允许这种跨域操作。
本文将深入探讨如何利用EasyUI的Window插件在Layout框架页面中实现弹出窗体到最顶层的效果,尤其是当窗体需要穿越iframe时。 首先,我们需要理解jQuery EasyUI的Window组件。Window是EasyUI中的一个动态弹出窗口,...
3. 最外层页面跳转:当页面是嵌套在多个iframe中时,最外层页面通常是整个浏览器窗口的顶级页面。在子页面中,如果需要直接跳转到最外层的页面,可以使用"top.location.href"属性。"top"对象代表了最外层的窗口对象...
首先,我们需要理解的是,Web应用程序中的窗口分为两种:顶层窗口(顶级窗口)和子窗口(iframe)。在传统的方式中,如果想要从子窗口向父窗口传递数据,通常需要借助于JavaScript事件处理和DOM操作。 1. **...
window.frames是一个包含当前窗口中所有子窗口(frames)的数组,而parent.frames则指向包含当前iframe的父窗口中所有子窗口的数组。如果当前页面在iframe中,那么window.frames.length将会小于parent.frames.length...