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

  

jquery实现替代iframe的功能的更多相关文章

  1. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  2. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  3. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  4. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  5. jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. jquery :操作iframe

    原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...

  7. Jquery中获取iframe的代码方法

    父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口:wi ...

  8. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  9. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

随机推荐

  1. 文件I/O之fcntl函数

    fcntl函数可以改变已打开的文件的性质. #include <fcntl.h> int fcntl( int filedes, int cmd, ... /* int arg */ ); ...

  2. C#_LINQ(LINQ to Entities)

    LINQ to Entities 是 LINQ 中最吸引人的部分.它让你可以使用标准的 C# 对象与数据库的结构和数据打交道.使用 LINQ to Entities 时,LINQ 查询在后台转换为 S ...

  3. Hibernate连接MySQL数据库乱码相关问题

    1.查看MySQL字符编码 >show variables like 'character%'; #执行编码显示 其中character_set_client,character_set_res ...

  4. 打造强大的BaseModel(1):让Model自我描述

    前言 从事iOS开发已经两年了,从一无所知到现在能独立带领团队完成一系列APP的开发,网络上的大神给了我太多的帮助.他们无私地贡献自己的心得和经验,写出了一篇篇精美的文章.现在我也开始为大家贡献自己的 ...

  5. 路径(keyPath)、键值编码(KVC)和键值观察(KVO)

    键路径 在一个给定的实体中,同一个属性的所有值具有相同的数据类型. 键-值编码技术用于进行这样的查找—它是一种间接访问对象属性的机制. - 键路径是一个由用点作分隔符的键组成的字符串,用于指定一个连接 ...

  6. php笔记01:php基本语法格式

    1. <?php ....... ?> 2. <script laugnage="php"> ....... </script> 3. < ...

  7. C语言---翻译过程

    c的实现中包括两种环境: 1.翻译环境(translation environment):源程序---->机器指令 2.执行环境(execution environment):执行机器指令 这两 ...

  8. Linux下mplayer源代码安装方法

    http://www.linuxidc.com/Linux/2007-08/6820.htm 1下载安装mplayer需要的各种软件 去这里下载http://www.mplayerhq.hu/MPla ...

  9. symonfy 项目根目录下没有 bin/console 文件的解决方法

    “Could not open input file: bin/console” Error comes when try to Run the Symfony Application 在采纳的答案中 ...

  10. JavaScript高级程序设计(七):JavaScript中的in关键字

    in 使用点一: 在js中,for--in用于遍历一个对象的属性,把对象的属性名和属性值都提出来. var obj = { "key1":"value1", & ...