11、iframe有那些缺点?

iframe中有哪些缺点?

  • iframe中会阻塞主页面的的Onload事件(过多会增加服务器的HTTP请求);
  • 搜索引擎的检索程序无法解读这种页面,不利于搜索引擎优化;
  • 页面样式调试麻烦,出现多个滚动条;
  • 浏览器的后退按钮失效
  • 产生多个页面,不易管理
  • 不容易打印
  • IFRAME和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

使用iframe中之前需要考虑这两个缺点。如果需要使用iframe中,最好是通过JavaScript的动态给IFRAME SRC添加属性值,这样可以绕开以上两个问题

iframe的优缺点及改进方法

iframe的缺点
1、页面样式调试麻烦,出现多个滚动条;

2、浏览器的后退按钮失效;

3、过多会增加服务器的HTTP请求;

4、小型的移动设备无法完全显示框架;
5、产生多个页面,不易管理;
6、不容易打印;

7、代码复杂,无法被一些搜索引擎解读。

iframe的优点:

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)

我在使用iframe过程中遇到的缺点:

1.为提高速度,采用 了动态创建和动态销毁iframe的方式,这样却导致了ie最后内存泄露 。

  1. //创建  
  2.  var iframe = document.createElement("iframe");   
  3. iframe.src = pageURL;   
  4. document.getElementById("contentDiv").appendChild(iframe);  
  5.   
  6.  //销毁 tempFrame.src = blankPageURL;   
  7. tempFrame.contentWindow.document.write('');   
  8. tempFrame.contentWindow.document.clear();   
  9. tempFrame.contentWindow.close();   
  10. document.getElementById('contentDiv').removeChild(tempFrame);   
  11. tempFrame = null;  
  12.  CollectGarbage();  
原因剖析和解决:

IFRAME销毁是无法全部释放内存,所以最好不用IFRAME。如果确实要用IFRAME就使用你的第2种方式,尽量减少创建IFRAME。 
建议使用iframe.contentWindow.location.replace(url)这个没有history或者 iframe.contentWindow.location = url.这个有history.

2 .用ajax,jquery.load()方法都可以实现要求。 

把你本来想创建的iframe换成DIV。然后点击菜单的时候,调用ajax或者.load,调用后台,返回数据之后,直接填充到DIV里即可。 
后台返回可以直接指向一个JSP画面。那2个方法可以直接取到填充完数据的HTML代码。 
$.post("www.baidu.com", null, function(result) { 
$("#div").html(result); 
})

3.iframe在IE6下有内存泄漏,我解决IE6是这样,但这样还是会有些内存泄漏,但没不处理严重 

/** 
* 跳转URL并回收资源 
*/ 
function gotoUrl( id, url ) { 
var el = document.getElementById( id ), iframe = el.contentWindow; 
if( el ) { 
if( $.browser.msie ) { 
el.src = 'about:blank'; 
try { 
iframe.document.write( '' ); 
iframe.close(); 
} catch( e ) { 
} 
} 
el.src = url; 
} 
}

*iframe会阻塞主页面Onload事件;
*iframe和主页面共享连接池,而浏览器对相同域连接有限制,所以会影响页面并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
针对优缺点,改进方法:
1. 添加iframe时,直接去掉滚动条<iframe src="time " width=" "; frameborder="0";scrolling="no">;
2.用ajax 可以替代iframe的优点;
总而言之:
运维性网站或继承性开发的网站,可以使用iframe;
销售内,官网、展示性网站等建议不使用iframe;
标准的网页设计是不使用iframe的。

猜你喜欢

转载自blog.csdn.net/beiniao520/article/details/80224816