jquery实现替代iframe的功能

简介: 原文:jquery实现替代iframe的功能使用iframe能很好的嵌入其他的网页或者网站,但是iframe每次加载都会浪费好多的时间,且会阻止其他元素的加载,搜索引擎也不能识别页面ifram框架中被调用的链接、文本、图片等等内容的。
原文: 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); 
     });
  });
});

  

目录
相关文章
|
1月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
12 0
|
1月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
31 0
|
7月前
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
43 0
|
1月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
9 1
|
5月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
64 0
jQuery点击图片来回切换功能
|
5月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
50 0
|
5月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
31 0
|
5月前
|
JavaScript
JS/JQuery操作iframe元素
JS/JQuery操作iframe元素
|
10月前
|
JavaScript
jQuery实现下拉列表选择条目左右选择功能
jQuery实现下拉列表选择条目左右选择功能
|
11月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
65 0