jquery操作 iframe的方法教程

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

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

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

html

代码如下:

<p>hello <a href="https://ejohn.org/">john</a>, how are
you doing?</p>

 

jquery

代码如下:

$("p").contents().not("[nodetype=1]").wrap("<b/>");结果:
<p><b>hello</b>
<a href="https://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","https://www.baidu.com")

 

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

 

代码如下:

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

 

ifame包含一个someid

 

代码如下:

<p id="someid">you want to get this content</p>

 

得到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代码如下：

 

代码如下:

<p id="phello" style="margin:10px
auto;width:360px;height:30px;">此处可通过iframeb的javascript函数，来替换哦~</p>
<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();