jQuery取得iframe中元素的常用方法详解


Posted in Javascript onJanuary 14, 2016

本文实例分析了jQuery取得iframe中元素的常用方法。分享给大家供大家参考,具体如下:

jquery取得iframe中元素的几种方法:

在iframe子页面获取父页面元素

代码如下:

$('#objId', parent.document);

搞定...

在父页面 获取iframe子页面的元素:

$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()

显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html();

根据iframename取得其中ID为"testId"元素

$(window.frames["iframeName"].document).find("#testId").html()

用JS或jQuery访问页面内的iframe,兼容IE/FF

注意:框架内的页面是不能跨域的!

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面首页</title>
</head>
<body>
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>
</body>
</html>

iframe.html 内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe.html</title>
</head>
<body>
<div id="test">3water.com</div>
</body>
</html>

1. 在index.html执行JS直接访问:

document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'

通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .

2. 在index.html里面借助jQuery访问:

$("#koyoz").contents().find("#test").css('color','red');

此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

收集网上的一些示例:

用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了

1. 在父窗口中操作 选中IFRAME中的所有单选钮

$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");

2. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");

父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了,如:
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 #Javascript
分享网页检测摇一摇实例代码
Jan 14 #Javascript
jquery淡入淡出效果简单实例
Jan 14 #Javascript
jQuery实现的左右移动焦点图效果
Jan 14 #Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 #Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 #Javascript
jQuery遮罩层效果实例分析
Jan 14 #Javascript
You might like
php中最简单的字符串匹配算法
2014/12/16 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
js实现抽奖效果
2017/03/27 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
微信小程序实现登录注册功能
2020/12/29 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
就业推荐表自我鉴定
2014/03/21 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
在Python中如何使用yield
2021/06/07 Python
Pytorch可视化的几种实现方法
2021/06/10 Python
vue3获取当前路由地址
2022/02/18 Vue.js
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
Python中time标准库的使用教程
2022/04/13 Python