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简单体验
Jan 10 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 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
PHP的FTP学习(一)
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
python实现播放音频和录音功能示例代码
2018/12/30 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
晚会邀请函范文
2014/01/24 职场文书
优质服务活动实施方案
2014/05/02 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫