很多人一直都有个想法，要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include，require实现统一多页面布局的能力。

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

iPage.html，<body>里dom：

  1. <iframe id=“iId“ name=“iName“ src=“srcPage.html“ scrolling=“no“ frameborder=“0“></iframe>

srcPage.html，<body>里dom：

  1. <h1>妹妹的一天</h1>
  2. <p>早上吃早点，中午约会吃饭，下午K歌，晚上和哥哥瞎折腾</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、重写iframe里的内容

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

  1. var iObj = document.getElementById(‘iId‘).contentWindow;
  2. iObj.document.designMode = ‘On‘;
  3. iObj.document.contentEditable = true;
  4. iObj.document.open();
  5. iObj.document.writeln(‘<html><head>‘);
  6. iObj.document.writeln(‘<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);
  7. iObj.document.writeln(‘</head><body></body></html>‘);
  8. iObj.document.close();

这两个对象的资料可参考：http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx

firebug测试以上代码性能

 

注释掉 iObj.document.designMode = ‘On’;

iObj.document.contentEditable = true;

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

四、iframe自适应高度

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

  1. window.onload = (function () {
  2. var iObj = document.getElementById(‘iId‘);
  3. iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
  4. });

现在对JS操作iframe你已经有了全新的认识，说不定那天会因为这个有什么新的web技术名词，嘿嘿，臭美下！

转载：http://www.hbjjrb.com/Jishu/Javascript/200903/154763.html

JS 操作iframe的更多相关文章

  1. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  2. [置顶] js操作iframe兼容各种浏览器

    在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...

  3. JS操作iframe

    1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...

  4. js操作iframe总结

    一 在父页面操作子页面   IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...

  5. JS操作iframe元素

    1.  demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...

  6. js操作iframe框架时应该屡清楚的一些概念

    1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...

  7. js操作Iframe非当前最上层窗体

    如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口.  <script language="javascript" type="tex ...

  8. 百度地图和js操作iframe

    document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv" ...

  9. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

随机推荐

  1. <a>设置长宽

    因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西, 1. 块元素. 特性:有物理属性,width,height写值起作用,而且要占据一行.2. 内联元素. 特性:没有物理属性.但是ma ...

  2. 集群负载均衡LVS

    电子商务已经成为生活中不可缺少的一部分,给用户带来了方便和效率.随着计算机硬件的 发展,单台计算机的性能和可靠性越来越高.网络的飞速发展给网络宽带和服务器带来巨大的 挑战,网络宽带的增长速度远远高于内 ...

  3. pthread_cond_wait()函数的详解

    http://hi.baidu.com/tjuer/item/253cc6d66b921317d90e4483 了解 pthread_cond_wait() 的作用非常重要 -- 它是 POSIX 线 ...

  4. php7+apache2.4 安装(window)

    一.下载 需要下载 php7.apache2.4.vc2015(VC库) PHP7下载地址:http://windows.php.net/download/ Apache 下载地址:https://h ...

  5. 用户数据验证的正确姿势之assert

    用户数据验证灰常重要, 不用多说了, 但是实现方法(准确的说是表现形式)有很多人, 如何优雅的完成一个后端验证过滤器是一个值得考量的问题, 我尝试过许多方法, 比如validator.js模块, ex ...

  6. 可变长度子网掩码（VLSM）在子网划分中的应用

    在学习可变长度子网掩码时,必须先熟练掌握二进制与十进制的转化.计算机中数据的单位(字节.位)等知识. 一.什么是可变长度子网掩码? 要理解可变长度子网掩码,先要理解子网掩码:要理解子网掩码,先要理解I ...

  7. 打开Win7休眠模式和离开模式的方法

    打开Win7休眠模式和离开模式的方法 ●启动休眠模式 从开始菜单中找到“附件→命令提示符”,手工输入如下命令:powercfg -a,从这里可以清楚的看到,计算机是支持休眠的,显示“尚未启用休眠&qu ...

  8. volatile关键字的介绍和使用

    关键字volatile的主要作用是使变量在过个线程中可见 1.假设volatile不存在我们将会面对的问题 public class PrintString implements Runnable { ...

  9. tp-03 模板显示

    方式模板:$this->display(); 每当建立一个控制器  都要在view建立一个名字相对应的文件夹   在建立相对于的页面.

  10. 一段有用的javascript加密解密

    今天在做一个老项目时,遇到一个需求,在javascript将url中的参数加密解密,从网上找发现了这段有用的代码: <SCRIPT LANGUAGE="JavaScript" ...