使用jQuery和ajax代替iframe

news/2024/7/19 9:30:06 标签: iframe, div替代, ajax异步加载页面, 爬虫

iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的。其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过。

目前主流的应用都使用了ajax代替了iframe

html:

<ul class="nav navbar-nav" id="indexMenu">
	<li><a target="main/main.html">首页</a></li>
	<li><a target="new/new.html">新闻</a></li>
	<li><a target="leave/leave.html">留言</a></li>
	<li><a target="download/download.html">资料下载</a></li>
</ul>

代替iframe的div:
<div id="iframeContent"></div>

js操作:

$(function(){
	$.get("main/main.html",function(data){
		$("#iframeContent").html(data);//初始化加载界面
	});
	
	$('#indexMenu li').click(function(){//点击li加载界面
		var current = $(this),
		target = current.find('a').attr('target'); // 找到链接a中的targer的值
		$.get(target,function(data){
			$("#iframeContent").html(data); 
		 });
	});
});
	

这样做不仅满足了响应式布局,而且div也能被爬虫认识,故而更受欢迎!


http://www.niftyadmin.cn/n/725640.html

相关文章

java将string转化为int

问题一&#xff1a;如何将数字类型的字符串转化为int类型。因为之前对该部分认识不够清晰&#xff0c;特作分析。 String str "100"; Integer.parseInt(str); Integer.valueOf(str); &#xff08;int&#xff09;str; 对于上面的3种转化方式&#xff0c; 第一种 Int…

javascript 中的get()与set()

在《javascript高级程序设计》中的第六章讲到访问器属性&#xff0c;其中讲到get()与set()方法。在此我只是把其中的例子拿出来看一看。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title&g…

handsontable自定义渲染

hansontable的渲染定义方式有多种&#xff0c;常见的有NumericRenderer、TextRenderer、CheckboxRenderer&#xff0c;但他们都是通过registerRenderer来渲染的&#xff0c;registerRenderer是hansontable的渲染公用方法&#xff0c;其他的渲染都是在此基础上扩展的。 那么我们…

javascript 原型属性(prototype 属性)与 实例属性(自身属性)

讲到原型属性&#xff0c;prototype属性&#xff0c;实例属性&#xff0c;自身属性&#xff0c;首先我们要明白这四者之间的关系。我查了一些资料&#xff0c;原型属性又叫prototype属性&#xff0c;实例属性又叫自身属性。只是叫法不同。下面我要引用他人写的一段代码来加以说…

HDD 格式化错误 E:31:00 --如何备份DV里的数据

索尼的硬盘DV机无法使用了&#xff0c;开机后提示 HDD 格式化错误,屏幕闪着E:31:00. 这个时候应该是硬盘有问题了&#xff0c;从新格式化后可能可以使用的。格式化前我想备份里面已有的数据&#xff0c;能备份多少就备份多少。 查了资料&#xff0c;发现使用免费的工具 Paragon…

javascript constructor属性

前面讲到原型属性与实例属性&#xff0c;在此我不得不提constructor属性&#xff0c;为了更深入了解constructor属性&#xff0c;我查了一些资料&#xff0c;下面我们来看看一个实例。 function Person() { // some code } javascript内部会自动执行如下几个动作&#xff1a;…

Unity 中 TextMeshPro 字体位置偏上/偏下

问题&#xff1a;在Unity中创建了一个新的TextMeshPro 字体&#xff0c;在使用的时候布局设置的居中对齐&#xff0c;但在场景中实际位置却和预期位置不服&#xff0c;如下图。 当然通过调整布局设置&#xff0c;也可以显示成正常的效果&#xff0c;但不可能所有文本都通过这…

JavaScript函数的认识

一、自定义函数&#xff08;完成某种功能的代码段&#xff09; 1.创建自定义函数 function 函数名称([参数[,...]]){ ... ... [return 返回值] } 也可以使用Function对象创建&#xff0c;如下&#xff1a; var func new Function(参数1&#xff0c;参数2&#…