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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
js实现异步循环实现代码
Feb 16 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php fread函数使用方法总结
2019/05/28 PHP
jquery tools之tooltip
2009/07/25 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python redis 删除key脚本的实例
2019/02/19 Python
学习python的前途 python挣钱
2019/02/27 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Python列表对象实现原理详解
2019/07/01 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
python 绘制正态曲线的示例
2020/09/24 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
美容院店长岗位职责
2014/04/08 职场文书
解除合同协议书
2014/04/17 职场文书
高一军训的心得体会
2014/09/01 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
离婚被告答辩状
2015/05/22 职场文书
导游词之介休绵山
2019/12/31 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers