jquery实现替代iframe的功能

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

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);
       });
   });
});
});

 以上就是本文的全部内容,感谢大家支持IQIOK前端之家!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值