iframe子页面获取父页面元素,或父页面获取iframe子页面的元素

简介: iframe子页面获取父页面元素,或父页面获取iframe子页面的元素

用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!

  • js
  1. 在父窗口中获取iframe中的元素
格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 
实例:window.frames["ifm"].document.getElementById("btnOk").click(); 
格式: 
document.getElementById("iframe的ID").contentWindow.document.getElementById("iframe中控件的ID").click(); 
实例: 
var obj=document.getElementById("ifm").contentWindow; 
var ifmObj=obj.document.getElementById("btnOk"); 
ifmObj.click(); 
2. 在iframe中获取父窗口的元素
格式:window.parent.document.getElementById("父窗口的元素ID").click(); 
实例:window.parent.document.getElementById("btnOk").click(); 
  • jQuery
  1. 在父窗口中获取iframe中的元素
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 
实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1 
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2 
实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2 
实例3:$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
  1. 在iframe中获取父窗口的元素
格式:$('#父窗口中的元素ID', parent.document).click(); 
实例:$('#btnOk', parent.document).click(); 
实例2: $(window.parent.document).find("input:radio").attr("checked","true");
  • 子窗口中调用父窗口中的另一个子窗口的方法(FRAME) parent.frames["Main"].Fun();
  • 父 html 调用子 iframe 内方法: document.getElementById("iframeID").contentWindow.func(data1,data2...);
  • 子 Iframe 中 调用 父html中方法: parent.func(data1,data2...)


相关文章
|
5月前
|
JavaScript 前端开发 API
快速实现 iframe 嵌套页面
【6月更文挑战第22天】快速实现 iframe 嵌套页面
|
6月前
|
前端开发 JavaScript
基于Html对父页面打开子页面Dialog()的使用
作者在使用基于QUI的前端项目中遇到一个问题:无法在Dialog组件中提交后刷新列表页面。经过搜索和努力,找到了解决方案。通过创建新的`top.Dialog()`,设置相关属性如标题、URL、尺寸,并在OK事件中调用子页面的提交方法及刷新列表的方法实现了需求。提供的代码示例展示了如何打开编辑窗体并处理提交事件以刷新列表。
|
6月前
html_ifream与父级窗口之间的数据传递(window和document)
html_ifream与父级窗口之间的数据传递(window和document)
42 0
|
JavaScript 定位技术
vue父页面给iframe子页面传值
vue父页面给iframe子页面传值
159 0
|
JavaScript
vue使用iframe 子页面调用父页面的方法
vue使用iframe 子页面调用父页面的方法
136 0
|
前端开发
iframe的运用---特别是获取父子页面的元素
iframe的运用---特别是获取父子页面的元素
504 0
|
JavaScript 前端开发
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
188 0
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性