iframe使用总结（实战）

最新推荐文章于 2023-03-31 10:18:49 发布
最新推荐文章于 2023-03-31 10:18:49 发布
阅读量857 收藏 2
点赞数
分类专栏： Js 文章标签： js总结 iframe

说在前面的话，iframe是可以做很多事情的。
例如：
a>通过iframe实现跨域;
b>使用iframe解决IE6下select遮挡不住的问题
c>通过iframe解决Ajax的前进后退问题
d>通过iframe实现异步上传。(Easyui中form组件就是用的iframe，实现表单提交时，可以提交上传域)
下面就一些问题一一论述。

1、iframe基本知识：

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL"></iframe>

可选属性：

标准属性：

 

2、操作iframe：

[html]  view plain  copy
 print ?
  1.   注：测试环境IE：8.0，FF：23.0.1  
  2.   a>隐藏iframe表框  
  3.     i>标签中设置：frameborder="0",<iframe frameborder="0" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no"></iframe>  
  4.     ii>DOM操作：  
  5.         <body>  
  6.         <iframe frameborder="1" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no" id="myiframe"></iframe>  
  7.         <script>  
  8.         var myiframe = document.getElementById("myiframe");  
  9.         myiframe.style.border="none";//FF下有效，IE下无效   
  10.         myiframe.setAttribute("frameborder",0);//FF下有效，IE下无效   
  11.         myiframe.frameBorder = 0;//FF下有效，IE下无效   
  12.         </script>  
  13.         </body>  
  14.   b>动态创建iframe  
  15.   <script>  
  16.     var newFrame = document.createElement("iframe");  
  17.     newFrame.src ="http://blog.csdn.net/cuew1987";  
  18.     newFrame.frameBorder = 0;//FF、IE隐藏边框有效  
  19.     newFrame.width = "400px";  
  20.     newFrame.height = "400px";  
  21.     newFrame.scrolling = "no";  
  22.     document.body.appendChild(newFrame);  
  23.   </script>  
  24.   c>获取iframe  
  25.     i>var obj = document.getElementById("iframeID");  
  26.       获取iframe对象，可直接操作iframe标签属性,如只想改变iframe的 src 或者 border ，scrolling 等attributes  
  27.     ii>var dom = frames["iframeName"];  
  28.        获取iframe的DOM对象，此对象可用来操作对象，比如想操作iframe页面中的元素。  
  29.    d>获取iframe中的window对象  
  30.     function getIframeWindow(obj) {  
  31.         //IE || w3c  
  32.         return obj.contentWindow || obj.contentDocument.parentWindow;  
  33.         //parentWindow 是 parent window object  
  34.     }  
  35.     document.getElementById取到的iframe是不能直接操作里面的document的，只能这样取：  
  36.     IE:frames[id].document或obj.contentWindow.document;  
  37.     FF:dom.contentDocument或obj.contentDocument;不绑定任何事件.  
  38. e>获取iframe页面高度  
  39.     function getIframeHeight(obj){  
  40.         var idoc = getIframeWindow(obj).document;   
  41.         if(idoc.body){  
  42.             return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  43.         }else if(idoc.documentElement){  
  44.             return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  45.         }  
  46.     }  
  47. f>父子页面互访  
  48.     i>子访问父：  
  49.         parent.html:  
  50.         <body>  
  51.             <div>等到的信息：<div id="msg"></div></div>  
  52.             <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
  53.         </body>  
  54.         son.html:  
  55.         <body>  
  56.         <input type="button" onClick="setMsg()" value="setMsg">  
  57.         <script>  
  58.         function setMsg(){  
  59.             var msg = window.parent.document.getElementById("msg");  
  60.             msg.innerHTML= "Hello world!!";  
  61.         }  
  62.         </script>  
  63.         </body>  
  64.     ii>父访问子：  
  65.         parent.html:  
  66.         <body>  
  67.         <div>等到的信息：<div id="setMsg"></div></div>  
  68.         <input type="button" value="setMsg" onClick="setMsg()"><br>  
  69.         <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
  70.         <script type="text/javascript">  
  71.         function setMsg(){  
  72.             var obj = document.getElementById("myiframe");  
  73.             var msg = getIframeWindow(obj).document.getElementById("msg");  
  74.             document.getElementById("setMsg").innerHTML = msg.innerHTML;  
  75.         }  
  76.         </script>  
  77.         </body>  
  78.         son.html:  
  79.         <body>  
  80.         <div id="msg">Hello world!!!</div>  
  81.         </body>  


3.iframe高度自适应和跨域：

[html]  view plain  copy
 print ?
  1. 实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便  
  2.     a>同域下的高度自适应  
  3.     parent.html:  
  4.     <body>  
  5.     <iframe width="400" id="myiframe" onload="setHeight()" height="1" frameborder="0" src="son.html"></iframe>  
  6.     <script type="text/javascript">    
  7.     function getIframeWindow(obj) {  
  8.         return obj.contentWindow || obj.contentDocument.parentWindow;  
  9.     }  
  10.     function getIframeHeight(obj){  
  11.         var idoc = getIframeWindow(obj).document;   
  12.         if(idoc.body){  
  13.             return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  14.         }else if(idoc.documentElement){  
  15.             return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  16.         }  
  17.     }  
  18.     function setHeight(){     
  19.         var myiframe = document.getElementById("myiframe");  
  20.         myiframe.height = getIframeHeight(myiframe);  
  21.     }   
  22.     </script>   
  23.     </body>  
  24.     另：document.documentElement与document.body相关说明(W3C DOM2.0规范)  
  25.     document.doucmentElement:  
  26.         documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the   
  27.         child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".  
  28.     document.body:  
  29.         document.body is the element that contains the content for the document. In documents with <body> contents, returns the <body> element,   
  30.         and in frameset documents, this returns the outermost <frameset> element.  
  31.         Though body is settable, setting a new body on a document will effectively remove all the current children of the existing <body> element.  
  32.     IE在怪异模型（Quicks Mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clientHeight=0。  
  33.     获取scrollTop:  
  34.     var sTop=Math.max(  
  35.         (document.body?document.body.scrollTop:0),  
  36.         (document.documentElement?document.documentElement.scrollTop:0),  
  37.         (window.pageYOffset?window.pageYOffset:0)  
  38.     );      
  39.   
  40.     b>跨域下高度自适应  
  41.     页面：  
  42.     index.html:(http://www.csdn.net)  
  43.     <iframe width="400" id="myiframe" onload="setHeight()" height="1" frameborder="0" src="son.html"></iframe>  
  44.     son.html:  
  45.     <body >  
  46.     <iframe id="agentIframe" style="position:absolute; top:-10000;left:-1000;" height="10" width="100%"></iframe>  
  47.     </body>  
  48.     <script>  
  49.         function getHeight(){  
  50.             var idoc = document;   
  51.             if(idoc.body){  
  52.                 return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  53.             }else if(idoc.documentElement){  
  54.                 return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  55.             }  
  56.         }  
  57.         window.onload = function(){  
  58.             var h = getHeight();  
  59.             document.getElementById("agentIframe").src="http://www.csdn.net#"+h;  
  60.         }  
  61.     </script>  
  62.     agent.html:(http://www.csdn.net)  
  63.     <script>  
  64.     (function(){  
  65.         var con = parent.parent.document.getElementById('frame_content');       
  66.         var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;        
  67.         con.style.height = href.split("#")[1]+"px";  
  68.     })();  
  69.     </script>  

4.iframe背景透明：

在ie6/7/8下引入iframe的时候，它的背景默认是白色，即使设置了style=”background-color:transparent;”也无效，
但是其他浏览器(firefox,chrome,opera,ie9)都正常显示，要解决这个兼容性问题，必须用到一个属性。
下面来看看现象：

[html]  view plain  copy
 print ?
  1. index.html:  
  2. <body style="background-color:#00f;">  
  3. <iframe frameborder="0" height="200" width="200"  src="son.html" scrolling="yes" id="myiframe"   
  4. style="background-color:transparent;"></iframe>  
  5. </body>  


结果如下图：(FF中有滚动条是因为在index.html中设置了有滚动条)

解决：
给iframe设置属性：allowTransparency=”true” //设置为true允许透明

[html]  view plain  copy
 print ?
  1. <body style="background-color:#00f;">  
  2. <iframe allowTransparency="true" frameborder="0" height="200" width="200"  src="son.html"   
  3. scrolling="yes" id="myiframe"></iframe>  
  4. </body>  


备注：iframe不设置此属性时，可使用iframe解决在IE6、7环境中遮住select

5.判断页面中是否有iframe:

[html]  view plain  copy
 print ?
  1. a>首先来看看window.frameElement这个属性。  
  2.     返回嵌入当前window对象的元素(比如 <iframe> 或者 <object>),即为包含本页面的iframe或frame对象。如果当前window对象已经是顶层窗口,则返回null.  
  3.     看看一个例子：  
  4.     parent.html:  
  5.     <body>  
  6.     <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
  7.     </body>  
  8.     son.html:(注意frameElement用在son.html中，如果用在parent.html中,则返回null)  
  9.     <body>  
  10.     <div id="msg">Hello world!!!</div>  
  11.     <script type="text/javascript">  
  12.         var iframe = window.frameElement;  
  13.         if(iframe){  
  14.             iframe.src = "http://blog.csdn.net/cuew1987";  
  15.         }  
  16.     </script>  
  17.     </body>  
  18.     备注：虽然该属性名为frameElement,但该属性也会返回其他类型比如 <object> 或者其他可嵌入窗口的元素.  
  19. b>兼容性如下图：  


[html]  view plain  copy
 print ?
  1. c>定义函数：  
  2.     i>判断父页面中是否含有iframe  
  3.     function hasIframe(){  
  4.         return document.getElementsByTagName("iframe").length > 0;  
  5.     }  
  6.     ii>判断某个页面是否在iframe标签中  
  7.     function innerIframe(){  
  8.         var iframe = window.frameElement;  
  9.         if(iframe){  
  10.             return typeof iframe !== "undefined";  
  11.         }  
  12.     }  

6、HTML5中iframe：

HTML 4.01 与 HTML 5 之间的差异在 HTML 5 中，仅仅支持 src 属性
<iframe src="/index.html"></iframe>
HTML5中全局属性：

7、easyui中form组件提交(包括上传域)：

[html]  view plain  copy
 print ?
  1. function submitForm(target, options) {  
  2.     options = options || {};  
  3.     if (options.onSubmit) {  
  4.         if (options.onSubmit.call(target) == false) {  
  5.             return;  
  6.         }  
  7.     }  
  8.     var form = $(target);  
  9.     if (options.url) {  
  10.         form.attr("action", options.url);  
  11.     }  
  12.     var frameId = "easyui_frame_" + (new Date().getTime());  
  13.     var frame = $("<iframe id=" + frameId + " name=" + frameId + "></iframe>").attr(  
  14.             "src",  
  15.             window.ActiveXObject ? "javascript:false" : "about:blank").css(  
  16.             {  
  17.                 position : "absolute",  
  18.                 top : -1000,  
  19.                 left : -1000  
  20.             });  
  21.     var t = form.attr("target"), a = form.attr("action");  
  22.     form.attr("target", frameId);//在iframe中提交表单  
  23.     try {  
  24.         frame.appendTo("body");  
  25.         frame.bind("load", cb);  
  26.         form[0].submit();  
  27.     } finally {  
  28.         form.attr("action", a);  
  29.         t ? form.attr("target", t) : form.removeAttr("target");  
  30.     }  
  31.     var checkCount = 10;  
  32.     function cb() {  
  33.         frame.unbind();  
  34.         var body = $("#" + frameId).contents().find("body");  
  35.         //contents()查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容  
  36.         var data = body.html();  
  37.         if (data == "") {  
  38.             if (--checkCount) {  
  39.                 setTimeout(cb, 100);  
  40.                 return;  
  41.             }  
  42.             return;  
  43.         }  
  44.         var ta = body.find(">textarea");  
  45.         if (ta.length) {  
  46.             data = ta.val();  
  47.         } else {  
  48.             var pre = body.find(">pre");  
  49.             if (pre.length) {  
  50.                 data = pre.html();  
  51.             }  
  52.         }  
  53.         if (options.success) {  
  54.             options.success(data);  
  55.         }  
  56.         setTimeout(function() {  
  57.             frame.unbind();  
  58.             frame.remove();  
  59.         }, 100);  
  60.     };  
  61. };  
  62. 另：form 的target属性：  
  63. a>HTML4中：  
  64. 定义和用法：target 属性规定在何处打开 action URL。  
  65. 兼容性：在 HTML 4.01 中，不赞成使用 form 元素的 target 属性；在 XHTML 1.0 Strict DTD 中，不支持该属性。  
  66. 属性值：  
  67. _blank 新窗口中打开  
  68. _self  默认，在相同的框架中打开  
  69. _parent 父框架中打开  
  70. _top    整个窗口中打开  
  71. framename  指定的frame name属性值的框架中打开  
  72.   
  73. b>HTML5中：  
  74. HTML 4.01 与 HTML 5 之间的差异  
  75. 在 HTML5 中 target 属性不再是被废弃的属性。不再支持 frame 和 frameset。  
  76. 现在，parent, top 和 framename 值大多用于 iframe。  

8、网上问题收集：

a>window.frameElement在chrome下undefined?

问题描述：
今天在重新编写我的日历组件的时候，由于用到使用iframe自定义属性传值，
将父页面的值写在iframe 自定义属性上，然后在iframe页面中使用 window.frameElement.getAttribute() 获取，
奇怪的是之前编写的日历控件代码一直都这样写，没有发生过错误，但是今天在chrome里面 window.frameElement 竟然是 undefined，
在firefox 甚至IE6下都没有问题，后来百度没有答案， 再google 也，没有答案。
解决：
最后自己根据以往经验想到或许是本地调试权限问题，于是打开apache使用域名的形式访问，果然可以了，呵呵！

 

问题收集持续更新。。。

 

说在最后的话：此文中许多都是前辈们的经验，在此做一总结，丰富自我的同时，以备需要之人参考，如果你是大神，请飘过，文中有不当之处，还望各位不要手下留情，不吝赐教，感激不尽！

今天上午打开微博的第一条消息就是博友转发的李开复：“世事无常，生命有限。原来，在癌症面前，人人平等。”，已身患淋巴癌，在这里希望李开复老师能早日康复！经过几个晚上的努力，此篇文章终于写完，生命不息，奋斗不止！

201309062026新浪微博李开复：“在以往的职业生涯里，我一直笃信“付出总有回报”的信念，所以给自己的负荷一直比较重，甚至坚持每天努力挤出三小时时间工作，还曾天真的和人比赛“谁的睡眠更少”、“谁能在凌晨里及时回复邮件”……努力把“拼命”作为自己的一个标签。现在，冷静下来反思：这种以健康为代价的坚持，不一定是对的。”

我想这就是所谓的人生价值吧。祈福！

renxing518
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe用法
03-17
NULL 博文链接：https://gang-zai.iteye.com/blog/570684
iframe使用
weixin_43842373的博客
03-31 9018
文章目录iframe的常用属性iframe 的常见使用方式一、获取 window 对象父页面获取子页面的window对象子页面获取父页面的window对象二、父子页面之间的传值方式通过 postMessage 进行通信通过本地存储进行通信通过 url 进行通信 iframe的常用属性 属性 说明 name 规定 frame 的名称 width 设置 frame 的宽度 height 设置 frame 的高度 src 设置在 frame 中显示的页面 frameborder 是
iframe使用方法
Eplusing
12-15 1105
ifralme用来在页面中嵌入另一个页面。 使用方法：将一个action的请求地址赋值给src属性。           w3C:http://www.w3school.com.cn/tags/tag_iframe.asp
iframe 方法的使用
qq_35392674的博客
01-22 4431
例如此图为两个页面 以下为代码 //前台 document.form1.submit(); document.form1.submit(); function changeFrameHeight(){     var iframe= document.getElementById("iframepage");        
HTML iframe 用法总结收藏
09-28
iframe是框架的一种形式，也比较常用到。
iframe的使用用法
10-31
iframe的使用用法
使用iframe的案例
01-29
使用iframe的案例
iframe使用post数据方式显示
03-04
ajax使用post请求返回页面,直接将返回的页面数据放入iframe标签中,具体实现不在此讨论，本文实现form表单,利用form表单的post请求方式实现提交数据加载iframe
IFrame的使用
进化的深山猿
06-29 303
Iframe的使用 <div class="bi-cond-res-wrapper"> <div class="bi-condition-sec"> <div class="bi-form-default" style=""> <div class="bi-form-title">左侧部分<div...
iframe使用实例
08-09
iframe使用实例，简单名了，演示iframe的基本功能
iframe框架使用(完美版)
05-10
iframe使用 自适应高度 封装js
iframe详细用法
03-23
iframe详细用法iframe详细用法iframe详细用法iframe详细用法iframe详细用法
iframe标签的使用
weixin_44767973的博客
12-07 2万+
iframe标签支持 HTML 中的全局属性： iframe标签支持 HTML 中的事件属性：如Window 事件属性、Form 事件、Keyboard 事件、Mouse 事件、Media 事件等 iframe常用的元素属性：IFrame 对象代表 HTML iframe 元素。可使用 getElementById() 来访问 iframe 元素。如： var iframe = document.getElementById(“iframe”); var iwindow = iframe.cont
深入浅出iframe
weixin_30902675的博客
04-19 170
前言 说起iframe，大家都会觉得很嫌弃或者很不愿接近，原因大概都是：能耗高，安全问题，spider不喜欢它...也有（不少）同学内心独白就是：不！这很low很dirty，我才不想用惹！但是我们必须的承认iframe之强大，很多时候我们都会（不得不）使用它，真的素又爱又恨呐-8- 今天就在这里和大家一起好好讨论一下iframe。 iframe基本概念 我们先看一个
iframe的基本介绍与使用
热门推荐
qq_45799465的博客
03-31 3万+
一、iframe的基本介绍 二、iframe的基本使用 三、iframe的属性介绍 四、iframe注意事项 五、iframe的URL传参方法 六、iframe的postMessage（）传参方法
iframe用法的详细讲解
chiuwingyan的博客
08-15 290
点击打开链接
高级色系PPT11.pptx
05-08
高级色系PPT11.pptx
node-v7.9.0-linux-x86.tar.xz
最新发布
05-08
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值