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 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 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定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP7 新增常量
2021/03/09 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python中的__slots__示例详解
2017/07/06 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
简单实现python数独游戏
2018/03/30 Python
Django 框架模型操作入门教程
2019/11/05 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python如何对XML 解析
2020/06/28 Python
python实现数字炸弹游戏程序
2020/07/17 Python
实习自我评价怎么写
2013/12/02 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
体育专业自荐书
2014/05/29 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
孔庙导游词
2015/02/04 职场文书
运动与健康自我评价
2015/03/09 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android