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的功能的更多相关文章
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- Jquery 方式获取 iframe Dom元素
Jquery 方式获取 iframe Dom元素 測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素& ...
- 通过javascript库JQuery实现页面跳转功能代码
通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...
- jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- jquery :操作iframe
原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...
- Jquery中获取iframe的代码方法
父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口:wi ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
随机推荐
- java_jdbc_基本连接池
MyDataSource实现封装连接池,MyConnection实现connection类,通过代理模式相互调用 package cn.itcast; import java.sql.*; publi ...
- Lipo Error!! can't open input file
参考文章:http://stackoverflow.com/questions/17348912/lipo-error-cant-open-input-file I got it to Work, i ...
- A XSS filter for Java EE web apps--转载
原文地址:http://java.dzone.com/articles/xss-filter-java-ee-web-apps Cross Site Scripting, or XSS, is a f ...
- ios 图片截取功能 图片拼接功能
截取整个view: -(UIImage*)captureView:(UIView *)theView{ CGRect rect = theView.frame; if ([theView isKind ...
- 关于Eclipse插件开发(五)-----编辑器类方法的使用说明
上面有讲ChinaEditor类继承EditorPart抽象类时,只实现了init,createPartControl两个方法,本节将逐步讲解其他的5个方法的用法. EditorPart方法的执行情况 ...
- Android Studio中文组(中文社区)
Android Studio中文组(中文社区)http://www.android-studio.org/
- Service的一些使用
service服务一般主要是作为后台服务使用的,前台服务一般结合通知一起. service一般主要用作长期后台服务的,而且和Activity结合性不那么紧密, 一般如果需要频繁的更新UI主要是用Act ...
- Spring 3.x 实践 第一个例子(Spring 3.x 企业应用开发实战读书笔记第二章)
前言:工作之后一直在搞android,现在需要更多和后台的人员交涉,技术栈不一样,难免鸡同鸭讲,所以稍稍学习下. 这个例子取自于<Spring 3.x 企业应用开发实战>一书中的第二章,I ...
- 经历:如何设置jquery easyui中下拉框不可编辑
今天,在项目中碰到一个这样的问题,当选择按钮时候,查询条件是可以输入的,否则,表单框是不可用的[图1].但是,批量查询中的船名和装港用到了自动配置,即jquery-easyui中的combox的配置. ...
- Ext.Net学习笔记17:Ext.Net GridPanel Selection
Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...