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 20 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
Vue头像处理方案小结
Jul 26 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
Vue路由权限控制解析
Nov 09 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
转换字符串为json对象的方法详解
2013/11/29 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python生成随机密码
2015/03/10 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Django视图和URL配置详解
2018/01/31 Python
python素数筛选法浅析
2018/03/19 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python实现二维插值的三维显示
2018/12/17 Python
Python基本socket通信控制操作示例
2019/01/30 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
学期自我鉴定
2013/11/04 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
关于倡议书的范文
2015/04/29 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书