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.ajax)
Nov 19 Javascript
js 窗口抖动示例
Sep 04 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 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中单引号与双引号的区别分析
2014/08/19 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
斜45度寻路实现函数
2009/08/20 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
关于numpy数组轴的使用详解
2019/12/05 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
舞蹈专业求职信
2014/06/13 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
感恩主题班会教案
2015/08/12 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang