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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
js中switch语句的学习笔记
Mar 25 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日期时间函数的高级应用技巧
2009/05/16 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
python 使用shutil复制图片的例子
2019/12/13 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
python 实现波浪滤镜特效
2020/12/02 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
会计应聘求职信范文
2013/12/17 职场文书
初二物理教学反思
2014/01/29 职场文书
音乐教学反思
2014/02/02 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
银行服务感言
2014/03/01 职场文书
怎样写离婚协议书
2014/09/10 职场文书
党员个人对照检查材料
2014/10/01 职场文书
就业意向协议书
2015/01/29 职场文书
2015年统战工作总结
2015/05/19 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript