使用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. 《RESTful Web Services》第一章 使用统一接口

    序言 HTTP是一种应用层协议.SOAP和一些Ajax Web框架都将HTTP作为一种传输信息的协议,难以充分利用HTTP层的基础设施. 1.2 如何保持交互的可见性     可见性是HTTP的一个核 ...

  2. mod_rewrite模块详解

    mod_rewrite模块提供了一个基于规则的(使用正则表达式分析器的)实时转向URL请求的引擎. 支持每个规则可以拥有不限数量的规则以及附加条件规则的灵活而且强大的URL操作机制. 此URL操作可以 ...

  3. google guava 基本工具

    近期在项目中用到了google中的cache了解到guava里面的一些工具类和对集合的操作,封装的都比较下,没有时间自己去写,先做个标记, 参考文章如下: http://macrochen.iteye ...

  4. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  5. android开发之路04(初级android工程师必会,你懂得!)

    Android初级Android工程师重点掌握内容如下: 1.Android开发基础: ①UI界面设计: ②SQLite数据库: ③android四大组件: ④android网络编程: ⑤androi ...

  6. mysql show commands

    a. show tables或show tables from database_name; -- 显示当前数据库中所有表的名称b. show databases; -- 显示mysql中所有数据库的 ...

  7. Win7:“找不到该项目”错误解决大法

    1.将以下代码复制粘贴到一新建的txt记事本文档中,并另存为del.bat文件(或者你喜欢的名字),注意扩展名为批处理文件bat. DEL /F /A /Q \\?\%1RD /S /Q \\?\%1 ...

  8. 计算openlayers两点之间的距离

    distanceTo: function(point) { var distance = 0.0; if ((this.x != null) && (this.y != null) & ...

  9. js中的call及apply的运用

    格式: obj.call(thisObj, arg1, arg2, ...); 参数为字符 obj.apply(thisObj, [arg1, arg2, ...]); 参数为数组 例一:sub函数赋 ...

  10. nc命令用法举例

    什么是nc nc是netcat的简写,有着网络界的瑞士军刀美誉.因为它短小精悍.功能实用,被设计为一个简单.可靠的网络工具 nc的作用 (1)实现任意TCP/UDP端口的侦听,nc可以作为server ...