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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
JavaScript 语言的递归编程
May 18 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
js中日期的加减法
May 06 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
vue3 源码解读之 time slicing的使用方法
Oct 31 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Python 图片处理库exifread详解
2021/02/25 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
上课迟到检讨书100字
2014/01/11 职场文书
二手房购房意向书范本
2014/04/01 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
行政处罚听证告知书
2015/07/01 职场文书
小学课改工作总结
2015/08/13 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电