js判断iframe中元素是否存在的实现代码


Posted in Javascript onDecember 24, 2016

本文章来给大家介绍js判断iframe中元素是否存在代码,有需要了解的朋友可进入参考。

一、纯原生态js实现方法,代码如下:

<script> 
var bb = document.getElementById('PreviewArea').contentWindow.document.getElementById('aPic'); 
if( bb ) 
{ 
} 
else 
{ 
} 
//apic为子页面Preview.aspx里面元素的Id 
</script> 
<body> 
<iframe name="PreviewArea" id="PreviewArea" scrolling="yes" width="100%" height="290" frameborder="1" src="Preview.aspx"></iframe> 
</body>

二、现在流行的jquery实现方法,代码如下:

if($(window.frames["iframepage"].document).find('.l-grid-row-cell').length > 0){  
alert(1); 
}else{ 

alert(2); 
}

以上代码,判断id为iframepage的iframe中css为1-grid-row-cell的元素是否存在。

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

2、用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")

Javascript 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js如何打印object对象
Oct 16 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
vue3中的组件间通信
Mar 31 Vue.js
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 #Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 #Javascript
纯JS实现表单验证实例
Dec 24 #Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 #Javascript
You might like
图象函数中的中文显示
2006/10/09 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python处理XML格式数据的方法详解
2017/03/21 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
python内存管理机制原理详解
2019/08/12 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python如何实现递归转非递归
2021/02/25 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
2015年暑期社会实践总结
2015/07/13 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
遗嘱格式范本
2015/08/07 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle