使用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. Android高手进阶教程(七)之----Android 中Preferences的使用!

    http://blog.csdn.net/Android_Tutor/article/details/5531849 大家好,我们这一节讲的是Android Preferences 的学习,Prefe ...

  2. swift 定义类方法(type methed)

    swift   中声明结构体或者枚举的类型方法,需要在func前加上关键字 ststic  ,但是如果要定义一个类的类方法时,需要用关键字 class class SomeClass { class ...

  3. Swift 结构体和类

    //*---------------------结构体-------------*/ //swift结构体也具有封装的概念 //swift结构体比OC C语言里面的结构体更加进了一步,里面可以有方法, ...

  4. [记录]java.math.biginteger cannot be cast to java.lang.long

    可以直接使用BigInteger类型进行接收, BigInteger id = (BigInteger)QueryRunner(conn,"SELECT LAST_INSERT_ID&quo ...

  5. Android端手机测试体系

    1.冒烟测试 跟web端的测试流程一样,你拿到一个你们开发做出来的apk首先得去冒烟,也就是保证他的稳定性,指定时间内不会崩溃.这款原生sdk自带的monkey可以当做我们的测试工具.就跟我之前博客所 ...

  6. 关于post请求参数的大小限制的说明

    最近做一个上传图片的项目,前端使用jquery 的post提交,然后把上传的图片的base64码 传到后台,发现几KB或者几十KB的图片,都可以传到后台,但是在上传几M 的图片在后台接收的时候,发现传 ...

  7. golang 依赖控制反转(IoC)

    主流开发语言,为了达到项目间的低耦合,都会借助IoC框架来实现.即抽象和实现分离,使用抽象层,不用关心这些抽象层的具体实现:抽象层的实现,可以独立实现.现在比较流行的领域驱动设计(ddd),为了达到将 ...

  8. 我的MFC学习之路(一)

    因为项目需求,我开始应用MFC写程序.具体接触MFC的时间大概也有两个月了.现在的水平算是刚刚踏入了MFC大门的半只脚.目前能基本使用MFC Class Wizard,可以根据实例仿照完成需求,小范围 ...

  9. .Net 组件技术概述

    1. 基本原理 组件是组件系统中功能的表现,没有组件就没有功能.特定接口是用于给组件管理程序来操纵.管理该组件,特定功能是组件需要完成的任务.在一个使用组件建立的产品中会随着功能数目的多少而会有多个组 ...

  10. 【SQL】MySQL学习笔记1-----子查询

    1.什么叫子查询? 通俗的讲就是查询中有查询,SQL语句中有多个select语句. 2.什么地方可以嵌入子查询? SELECT 列 (不在标准之内) FROM 表 (可以嵌入,作为表存在) WHERE ...