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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
浅析vue深复制
Jan 29 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
小程序分享模块超级详解(推荐)
Apr 10 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调用数据库的存贮过程!
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python中list循环语句用法实例
2014/11/10 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python交互式图形编程的实现
2019/07/25 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
大学生自荐信
2013/12/11 职场文书
自荐书模板
2013/12/19 职场文书
竞争上岗实施方案
2014/03/21 职场文书
市场督导岗位职责
2015/04/10 职场文书
大学班长竞选稿
2015/11/20 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Nginx快速入门教程
2021/03/31 Servers
canvas绘制折线路径动画实现
2021/05/12 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Python实现对齐打印 format函数的用法
2022/04/28 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL