分享

jquery实现替代iframe的功能

 ThinkTank_引擎 2016-01-04

使用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./" 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);
     });
  });
});

  

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多