jquery实现替代iframe的功能

 

1.使用iframe能很好的嵌入其他的网页或者网站，但是iframe每次加载都会浪费好多的时间，且会阻止其他元素的加载，搜索引擎也不能识别页面ifram框架中被调用的链接、文本、图片等等内容的。

2.ios不能很好的支持iframe

3.二级页面跳回一级页面，不需要重新加载数据，配合锚点链接使用，可返回到一级页面浏览的那条数据的位置

4.此方法有2个缺点：第一个加载速度有点慢，第二个返回一级页面后，一级页面的有些样式会变化，此时只需要将变化的样式重新设定高宽即可。

Html代码

< ul  class="list-side"> 　　< li >< a  target="a.html" >about</ a ></ li > 　　< li >< a  target="b.html" >news</ a ></ li > 　　< li >< a  target="c.html" >product</ a ></ li > 　　< li >< a  href="http://ucmic.blogspot.com/" target="_blank" >contact</ a ></ li > </ ul >   < div  id="iframe"> 　　 <!--jquery 插入html 位址--> </ div >

实现功能的Javascript代码

$(document).ready( function (){ 　　$.get( "a.html" , function (data){ //初始將a.html include div#iframe 　　　　$( "#iframe" ).html(data); 　　}); $( function (){ 　　$( '.list-side li' ).click( function () {    　　 // 找出 li 中的超链接 href(#id)   　　　　 var  $ this  = $( this ),   　　　　_clickTab = $ this .find( 'a' ).attr( 'target' ); // 找到链接a中的targer的值   　　　　$.get(_clickTab, function (data){   　　　　　　$( "#iframe" ).html(data);   　　　　}); 　　}); });