本文和大家重点讨论一下JS跨域访问操作iframe里的dom，很多人一直都有个想法，要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include，require实现统一多页面布局的能力。

JS跨域访问操作iframe里的dom

通过Javascript的帮忙我们可以像后台一样动态加载操作iframe对象属性src指向的html页面的内容。这样的操作需要提供两个页面，一个页面是iframe所在页面(页面名称：iPage.html)，另一个页面是iframe属性src指向页面（页面名称：srcPage.html）。

◆iPage.html，里dom：

 
 
 
 

  
  
  
  

  
  
  
  
src=“srcPage.html“scrolling=“no“frameborder=“0“> 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

◆srcPage.html，里dom：

 
 
 
 

  
  
  
  
妹妹的一天
 
  
  
  
  
早上吃早点，中午约会吃饭，下午K歌
 
 
 
 
 

下面讨论IE下JS是怎么操作以上两个页面，再讨论firefox的做法，最后给出兼容IE,firefox浏览器操作iframe对象的方法。

一、IE下访问操作iframe里内容

大家都知道iframe是非标准html标签，它是由IE浏览器推出的多布局标签,随后Mozilla也支持了这个标签。(闲话，嘿嘿)

1.IE通过document.frames["IframeName"]获取它，例子：我们在iPage.html里输出srcPage.html里h1的内容，JS如下：

 
 
 
 

  
  
  
  
alert(document.frames["iName"].document.  
  
  
  
  
getElementsByTagName(‘h1‘)[0].firstChild.data); 
 
 
 
 

你会发现这样在页面里加入代码，好像并没有输出想要的东东，为什么呢？这个我也没有搞清楚，只是习惯性的加入了window.onload就有输出了（注：JS代码都写到这个事件里去），知道的人士可否告诉我下。why?更改之后代码IE下有了输出，firefox下document.frames没有定义错误提示：

 
 
 
 

  
  
  
  
window.onload=(function(){  
  
  
  
  
alert(document.frames["iName"].document.  
  
  
  
  
getElementsByTagName(‘h1‘)[0].firstChild.data);  
  
  
  
  
}); 
 
 
 
 

2.IE另一种方法contentWindow获取它，代码：

 
 
 
 

  
  
  
  
window.onload=(function(){  
  
  
  
  
variObj=document.getElementById(‘iId‘).contentWindow;  
  
  
  
  
alert(iObj.document.  
  
  
  
  
getElementsByTagName(‘h1‘)[0].firstChild.data);  
  
  
  
  
}); 
 
 
 
 

此方法经过IE6,IE7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现MozillaFirefoxiframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。

后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）

3.改变srcPage.html里h1标题内容，代码：

 
 
 
 

  
  
  
  
iObj.document.getElementsByTagName(‘h1‘)[0].  
  
  
  
  
innerHTML=‘我想变成她一天的一部分‘; 
 
 
 
 

通过contentWindow后访问里面的节点就和以前一样了。

二、firefox下访问操作iframe里内容

Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准，通过标准可以少写一个document,代码：

 
 
 
 

  
  
  
  
variObj=document.getElementById(‘iId‘).contentDocument;  
  
  
  
  
alert(iObj.getElementsByTagName(‘h1‘)[0].  
  
  
  
  
innerHTML=‘我想变成她一天的一部分‘);  
  
  
  
  
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data); 
 
 
 
 

兼容这两种浏览器的方法，现在也出来了，就是使用contentWindow这个方法。

操作iframe是不是可以随心所欲了呢？如果还觉得不爽，你甚至可以重写iframe里的内容。#p#

三、重写iframe里的内容

通过designMode（设置文档为可编辑设计模式）和contentEditable（设置内容为可编辑），你可以重写iframe里的内容。代码：

 
 
 
 

  
  
  
  
variObj=document.getElementById(‘iId‘).contentWindow;  
  
  
  
  
iObj.document.designMode=‘On‘;  
  
  
  
  
iObj.document.contentEditable=true;  
  
  
  
  
iObj.document.open();  
  
  
  
  
iObj.document.writeln(‘‘);  
  
  
  
  
iObj.document.writeln(‘‘);  
  
  
  
  
iObj.document.writeln(‘‘);  
  
  
  
  
iObj.document.close(); 
 
 
 
 

firebug测试以上代码性能,如图

注释掉

 
 
 
 

  
  
  
  
iObj.document.designMode=‘On’;  
  
  
  
  
 
  
  
  
  
iObj.document.contentEditable=true;  
  
  
  
  
 
 
 
 
 

 结果如图：

效果没有变，时间效率是注释前的将近三倍。嘿嘿。那两个对象是参考网络一些人的写法，重写iframe里内容，其实没有必要用designMode和contentEditable，除非有其他的需求。

四、iframe自适应高度

有了上面的原理要实现这个相当简单，就是把iframe的height值设置成它里面文档的height值就可以。代码：

 
 
 
 

  
  
  
  
window.onload=(function(){  
  
  
  
  
variObj=document.getElementById(‘iId‘);  
  
  
  
  
iObjiObj.height=iObj.  
  
  
  
  
contentWindow.document.documentElement.scrollHeight;  
  
  
  
  
}); 
 
 
 
 

【编辑推荐】

1. JS控件在IFrame中的应用
2. JS方法在iframe父子窗口间的调用
3. C#代码与JavaScript函数的相互调用
4. JavaScript函数中arguments对象
5. Javascript中CSS属性float特殊写法

当前标题：JS实现跨域访问iframe里的dom
本文URL：http://www.shufengxianlan.com/qtweb/news3/459253.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联