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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
小程序自定义日历效果
Dec 29 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
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
PHP 翻页 实例代码
2009/08/07 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue.js学习之UI组件开发教程
2017/07/03 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
优秀高中生事迹材料
2014/02/11 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
公司周年庆典致辞
2015/07/30 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript