在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素
js
在父窗口中获取iframe中的元素
1、
格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例:window.frames["ifm"].document.getElementById("btnOk").click();
2、
格式:
var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例:
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();
在iframe中获取父窗口的元素
格式:window.parent.document.getElementById("父窗口的元素ID").click();
实例:window.parent.document.getElementById("btnOk").click();
jquery
在父窗口中获取iframe中的元素
1、
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1
2、
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2
在iframe中获取父窗口的元素
格式:$('#父窗口中的元素ID', parent.document).click();
实例:$('#btnOk', parent.document).click();
转载自:http://hi.baidu.com/lost2happy/blog/item/8006ba2f862d984b4ec2266d.html
分享到:
相关推荐
不过,当iframe和父页面属于同一域时,可以通过JavaScript或jQuery来操作父页面中的元素和方法。本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先,需要明确iframe元素可以被视为一个...
name属性允许在父窗口中通过window.frames数组访问iframe,而id属性则可以在iframe内部使用window.parent.document.getElementById()来访问父窗口的元素。 3. jQuery的contents()方法:这个方法返回iframe的document...
- **`jQuery`插件**:`jqueryiframe`可能包含一些jQuery插件,如`iframeResizer`,这些插件简化了iframe的尺寸调整和通信过程。 4. **JQuery方法** - **`$(selector).contents().find()`**:使用jQuery选择器获取...
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <...
总结,通过`jQuery`,我们可以方便地在`iframe`中操作父页面的元素,调用父页面的方法,实现父子页面之间的交互。这在构建复杂多页应用或需要隔离部分功能时非常有用。然而,要注意的是,由于同源策略的限制,`...
在这个场景下,"jquery应用子页面在父页面打开"意味着利用jQuery的方法和特性来处理父子页面之间的交互。 首先,我们需要理解基本的HTML框架结构,如`<iframe>`元素,它可以用于在父页面中嵌入子页面。通过设置`src...
`iframe`的父子通信可以让我们实现不同页面间的交互,无论是同源策略下的非跨域通信,还是需要应对跨域场景。下面我们将详细介绍这两种情况下的实现方式。 ### 非跨域通信 #### 父调子 在非跨域情况下,父页面...
首先,要在父窗口中操作iframe内部的元素,我们可以通过jQuery的“contents”方法获取iframe的文档对象。一旦我们有了iframe的文档对象,就可以像操作普通DOM元素一样来操作iframe内部的元素了。使用“find”方法...
如果要在 iframe 子页面中取父页面中的标签中的值,可以使用 `window.parent.document.getElementById("test").value`,或者使用 jQuery 方法: ``` $(window.parent.document).contents().find("test").val(); ``` ...
- 在Web前端开发中,iframe是用于嵌入其他HTML页面的一个框架元素。尽管它在设计复杂页面时非常有用,但由于浏览器之间的兼容性问题,其内部和外部的交互变得复杂。 - 不同的浏览器对于iframe中的window对象有不同...
- **页面通信**:如果ZTree和iframe中的页面需要交换数据,可以使用postMessage API实现父子窗口间的通信。 - **兼容性**:确保ZTree和iframe的使用在主流浏览器上都能正常工作。 通过以上的解释,我们可以看到...
这个"弹出层示例展示"显然是一个教学或演示如何实现弹出层的实例,特别提到了与`iframe`的父子关系,这意味着它可能涉及到了`iframe`嵌套以及与父页面的通信。 弹出层通常通过JavaScript、jQuery或其他前端库来创建...
这里使用`parent.$()`实际上是调用了父页面的jQuery对象,从而可以操作父页面的DOM元素。 2. 访问父页面方法: ```javascript var parentMethodValue = parent.getMethodValue(); // 调用父页面的名为'...
1. `window.postMessage`:用于父子iframe之间的安全通信,传递拖拽信息。 2. `event.stopPropagation()`:防止事件在DOM树中继续向上冒泡,避免在iframe之间重复处理事件。 3. `event.preventDefault()`:阻止默认...
- **jQuery操作iframe技巧总结:** 学习如何使用jQuery进行iframe的创建、隐藏、显示、内容加载等操作。 - **jQuery扩展技巧总结:** 探索jQuery的插件机制和自定义扩展方法。 - **jQuery常用插件及用法总结:** ...
- **从父页面获取子页面数据**:通过`window.frames`对象,可以访问到`iframe`中的`window`对象,进而获取或修改其中的元素值。 ```javascript var i1 = window.frames['iframeId']; var val = i1.document....
当子页面尝试通过parent对象访问父页面的元素或执行操作时,必须确保对父页面的访问是安全的,防止跨站脚本攻击(XSS)。因此,在设计父子页面通信机制时,应尽可能地使用安全的通信方式,并对从子页面传入的数据...
如果父页面和子页面不是同源的,浏览器的同源策略将会阻止他们之间进行Ajax请求或通过iframe互相访问。在这种情况下,需要服务器端支持CORS(跨源资源共享)策略,或者通过服务器端进行代理请求,来实现跨域的数据...