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表格控件(自写,网上没有的)
Jun 04 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
javascript事件模型介绍
May 31 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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中extract()函数的妙用分析
2012/07/11 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue内置指令详解
2018/04/03 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
Python GUI布局尺寸适配方法
2018/10/11 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python Json数据文件操作原理解析
2020/05/09 Python
python 基于opencv实现图像增强
2020/12/23 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
中专生的个人自我评价
2013/12/11 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
导游词之张家口
2019/12/13 职场文书
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js