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过滤html的字符串(注释标记法)
Jul 08 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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中常用的预定义变量小结
2012/05/09 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue实现微信分享功能
2018/11/28 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JavaScript实现随机点名程序
2020/03/25 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python正则表达式re模块详解
2014/06/25 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python中的类与类型示例详解
2019/07/10 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
Python创建自己的加密货币的示例
2021/03/01 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
2014年生产管理工作总结
2014/12/23 职场文书
人力资源部岗位职责
2015/02/11 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
教师节主持词开场白
2015/05/29 职场文书
高中化学教学反思
2016/02/22 职场文书