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...)


相关文章
|
JavaScript 前端开发
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
1965 0
|
12月前
|
JSON 前端开发 JavaScript
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
本文来自【沉浸式趣谈】,探讨前端处理Excel的三大主流库:xlsx、Handsontable和ExcelJS。 - **xlsx**:轻量高效,适合简单读写数据,但样式支持有限。 - **Handsontable**:功能强大,提供类Excel在线编辑体验,但商用需付费且性能消耗较大。 - **ExcelJS**:现代全能,API友好,支持复杂样式与公式,免费开源,推荐用于精细处理场景。
1045 0
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
|
缓存 Java Spring
解决IDEA报错:无法检索应用程序 JMX 服务 URL[Failed to retrieve application JMX service URL]亲测可用
解决IDEA报错:无法检索应用程序 JMX 服务 URL[Failed to retrieve application JMX service URL]亲测可用
3542 1
|
Java Android开发
IDEA设置项目编码格式【修改为GBK 或 UTF-8】
这篇文章介绍了在IntelliJ IDEA中如何设置项目编码格式,包括将项目编码修改为GBK或UTF-8的详细步骤和图解。
23310 12
IDEA设置项目编码格式【修改为GBK 或 UTF-8】
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
2424 2
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
5536 0
|
前端开发 JavaScript Java
idea中如何不重启tomcat 即可看到修改内容变化
这篇文章介绍了在IntelliJ IDEA中实现对Java Web应用的热部署(Hot Swap)的多种方法,包括启用自动构建、使用Exploded Artifact、安装JRebel插件、更改静态资源、使用Spring Boot的devtools以及IDEA的HotSwap功能,以便在不重启Tomcat服务器的情况下看到修改内容的变化。
idea中如何不重启tomcat 即可看到修改内容变化
|
JavaScript UED
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
1745 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目

热门文章

最新文章