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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM