jquery实现替代iframe的功能

原文: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);
    });
  });
});

  

jquery实现替代iframe的功能,布布扣,bubuko.com

时间: 2024-10-22 20:19:50

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

借助Jquery Jqprint实现网页打印功能

今天利用闲余时间研究了一下Jquery Jqprint插件,使用该Jquery脚本可以轻而易举的实现打印网页指定区域内容的功能: 例子一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

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

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

用JQuery仿造QQ头像裁剪功能

原文:用JQuery仿造QQ头像裁剪功能 最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的很清楚,故在本博客内不赘述. 原理: 主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ-UI的draggable插件(但是缩放没有,贪方便可以使用Resizable插件,但都用插件的话就没有研究的意义了). 缩放功能原理其实很简单,不

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

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.

Jquery 方式获取 iframe Dom元素

Jquery 方式获取 iframe Dom元素 测试页面代码: <html>  <head>   <title>jquery方式,访问iframe页面dom元素</title>   <meta name="Author" content="孙勤波">   <meta http-equiv="Content-Type" content="text/html;charset

jquery 获取子iframe和获取父框架的例子

今天做前端页面设计,用到了iframe,查找资料,整理出来几个用jquery 获取子iframe和获取父框架的例子,用起来非常方便. 在firefox最新版(41)和IE9下测试通过.jquery 版本11.3. //获取子框架coverIframeFormTargetId中ID为attachment_Cover_Image_id的value的值 var attid =$("#coverIframeFormTargetId").contents().find("#attach

jquery组件团购倒计时功能(转)

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <!doctype html> <html> <head>     <meta charset="utf-8">     <title&g

用jquery实现html5的placeholder功能

html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的提示文字. 当输入框失去焦点时,若输入框中的数据为空,则再次出现提示文体. 效果图: talk is cheap , show you code: <!doctype html> <html> <head> <meta charset="utf-8"

jQuery如何获取iframe中的元素

jQuery如何获取iframe中的元素:这个问题其实非常简单,既然要获取iframe中的元素,那么首先要获取iframe.关于获取iframe这里就不介绍了可以参阅父窗口和iframe中对象互相传值简介一章节. 下面直接看一段代码就能够很轻松明白: $(window.frames["main"].document).find("ul") 以上代码id属性值为main的iframe元素中的ul元素. 原文地址是:http://www.softwhy.com/foru