jquery操作 iframe的方法


Posted in Javascript onDecember 03, 2014

我们先看一下 JQUERY中的对像 contents() 的帮助文件

contents()
概述
查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

示例
描述:
查找所有文本节点并加粗

HTML

<p>Hello <a href="http://ejohn.org/">John</a>, how are 

you doing?</p>

jQuery

$("p").contents().not("[nodeType=1]").wrap("<b/>");结果:

<p><b>Hello</b> 

<a href="http://ejohn.org/">John</a>, <b>how are you 

doing?</b></p>

描述:
往一个空框架中加些内容

HTML

<iframe 

src="/index-blank.html" width="300" height="100"></iframe>

jQuery

$("iframe").contents().find("body")

.append("I'm in an iframe!");

 

去掉iframe 的边界 frameborder="0"

1 内容里有两个ifame

<iframe id="leftiframe"...</iframe> 

<iframe id="mainiframe..</iframe>

leftiframe中jQuery改变mainiframe的src代码:

$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")

2 如果内容里面有一个ID为mainiframe的ifame

<iframe id="mainifame"...></ifame>

ifame包含一个someID

<div id="someID">you want to get this content</div>

得到someID的内容

$("#mainiframe").contents().find("someID").html()html 或者 

$("#mainiframe").contains().find("someID").text()值

2 如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容

$("#mainframe",parent.document.body).contents().find("someID").html()或者
$("#mainframe",parent.document.body).contents().find("someID").val()

Jquery获取到 iframe 所属的父窗口的里面的id为xuan的 标签的

$(window.parent.document).find("#xuan").html(x);//

//js创建 元素 并追加到 父元素的 Iframe中的 元素中的dom操作问题:

iframe中直接调用父窗口中的方法:假设父窗口有个add的方法

self.parent.add();

===============================================================

IE和Firefox对iframe document对象的差异性

在IE6、IE7中,我们可以使用document.frames[ID].document来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在Firefox下却不可以使用,Firefox下使用的是符合W3C标准的document.getElementById(ID).contentDocument方法,今天我在写实例的时候,通过IE8进行测试,IE8也是使用的符合W3C标准的
document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IE和Firefox下通用的获取iframe
document对象的函数—getIFrameDOM:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

P.S.:如果我们要获取iframe的window对象,而不是document对象,可以使用document.getElementById(ID).contentWindow的方法。这样我们就可以使用子窗口中的window对象了,比如子窗口中的函数。

在子窗口使用父窗口的函数,获取父窗口document对象

在子窗口中,我们可以通过parent就可以获得父窗口的window对象,如果假如我们在父窗口有一个函数为getIFrameDOM,我们可以通过parent.getIFrameDOM来调用,同理我们使用parent.document就可以在子窗口中访问父窗口的document对象了。

使用JavaScript进行iframe的DOM操作实例

首先,我们在父窗口中引入两个iframe子窗口,ID分别为wIframeA、wIframeB,地址分别为:a.html、b.html。
父窗口主要HTML代码如下:

<div id="pHello" style="margin:10px 

auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数,来替换哦~</div> 

<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" 

frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB" 

src="b.html" scrolling="no" frameborder="0"></iframe>

 
在子窗口A、B中我放了一个ID为hello的P,以方便我们进行DOM操作演示,子窗口A、B的主要HTML代码如下:
<p id="hello">Hello World!</p>

1、在iframe中,父窗口操作子窗口的DOM

建好了父窗口跟子窗口,这样我们可以在父窗口中,通过以下iframeA()函数来把子窗口A更换P的背景颜色为红色:

functioniframeA(){//给子窗口A改变ID为hello的背景色

vara=getIFrameDOM("wIframeA");

a.getElementById('hello').style.background="red";

}

functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM获取函数

returndocument.getElementById(id).contentDocument||document.frames[id].document;

}

2、在iframe中,子窗口操作父窗口的DOM

在子窗口中,我们可以方便的进行父窗口DOM操作,只需要在DOM操作之前添加亦歌parent对象的方法就可以啦,如:在上面的子窗口B中,我们可以使用下面的代码把,父窗口中ID为“pHello”的内容给替换掉:

-------------------

3、在iframe中,子窗口A操作子窗口B的DOM

既然子窗口可以操作父窗口的window对象和document对象,那么子窗口也可以操作另外的子窗口的DOM啦~断桥残雪在子窗口B中可以直接使用parent直接调用父窗口中的getIFrameDOM函数获得子窗口A的document对象,这样要修改子窗口A的内容就很简单啦,如以下的代码:

vara=parent.getIFrameDOM("wIframeA");

===================================================================================

一个iframe高度自动变化的问题搞了我半天,网上找了下资料,不是很好,结合了一下jquery(版本1.3.2),4行代码即可,完美兼容IE、Firefox、Opera、Safari、Google
Chrome,js如下:

function  heightSet(thisFrame){

if($.browser.mozilla || $.browser.msie){

          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;

}else{

          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;

//这行可代替上一行,这样heightSet函数的参数可以省略了

          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;

}

       document.getElementById("thisFrameId").height=bodyHeight;  

}

<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src=""onload="heightSet(this)"></iframe>

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题,如果你ajax用得特别多,但又不想每次都去设置,那动态改变iframe肯定达不到你的代码清洁要求,没办法,要么你就脱离iframe。我只能说说一般处理方式,毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码

parent.window.heightSet();
Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
使用js实现数据格式化
Dec 03 #Javascript
使用js获取图片原始尺寸
Dec 03 #Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 #Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 #Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 #Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
You might like
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS重载实现方法分析
2016/12/16 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python 学习笔记
2008/12/27 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python代码实现KNN算法
2017/12/20 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
tornado+celery的简单使用详解
2019/12/21 Python
关于Django Models CharField 参数说明
2020/03/31 Python
什么是python的自省
2020/06/21 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
公司档案管理制度
2015/08/05 职场文书