" />
当前位置:首页 > 日记 > 正文

使用jQuery和ajax代替iframe的方法 | 详解

使用jQuery和ajax代替iframe的方法 | 详解

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也能被爬虫认识,故而更受欢迎!

以上这篇使用jQuery和ajax代替iframe的方法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

qq头像挂件怎样设置图文教程

qq头像挂件怎样设置图文教程

设置,教程,图文教程,方法,空间,  有时我们在qq中看到一些好友的头像里多了一些小挂件,会让人觉得很炫酷,这是如何实现的呢?手机qq头像挂饰在哪?手机QQ头像挂件在?哪里设置?怎么设置qq头像挂饰?下面就让小编告诉你qq头像挂件设置 的方法教程…

Javascript实现数组中的元素上下移

Javascript实现数组中的元素上下移

元素,组中,电脑软件,Javascript,前言我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没…

解决option标签selected=selected

解决option标签selected=selected

属性,失效,标签,电脑软件,option,要在select标签上面加上autocomplete="off"关闭自动完成,不然浏览器每次刷新后将自动选择上一次关闭时的option,这样默认属性selected="selected"就会失效啦要记住每次遇到select标签时就最好要加上autoc…

在word2013中如何计算表格数据

在word2013中如何计算表格数据

数据,计算,表格,电脑软件,  Word中的表格不仅可以手动输入数据,同时也可以进行自动计算。下面介绍了4种常用计算方法(求和、求均值、求最大值、求最小值),接下来就由小编给大家分享下word2013计算表格数据的技巧,希望能帮助到您。word2013计…

Fireworks将jpg转换成png格式

Fireworks将jpg转换成png格式

转换成,格式,电脑软件,Fireworks,jpg,Fireworks中怎么把jpg图片转换成png格式?其实方法很简单,下面小编就为大家详细介绍Fireworks将jpg图片转换成png格式方法,一起来学习吧!步骤:1、首先找到桌面上的Fireworks软件2、打开它3、接着我们有一个PN…

html5+canvas实现支持触屏的签名插

html5+canvas实现支持触屏的签名插

插件,支持,触屏,教程,电脑软件,前言大家在日常开发中使用该jQuery插件来制作在线签名,用户绘制的东西以图片的形式保存下来,非常方便实用。下面将实现支持的方法分享给大家,供大家参考学习,下面来一起看看详细的介绍吧。方法如下:使用该签名插件…

ps球面工具怎么使用? ps制作球面化

ps球面工具怎么使用? ps制作球面化

文字,教程,工具,球面,电脑软件,ps的滤镜功能中有球面化效果,该怎么使用这个功能制作球面化文字呢?下面我们就来看看详细的教程。1、新建文档2、将图层1背景设为黑色,并创建图层23、选择文字工具在图层2中输入文字4、选中图层2然后在菜单栏中选…

JavaScript上传文件时不用刷新页面

JavaScript上传文件时不用刷新页面

方法,上传文件,刷新页面,推荐,电脑软件,用js给出一个上传文件时不用刷新页面的方案 <input id="upload" type="file"/> <button id="upload-btn">upload</button> document.getElementById('upload-btn').onclick = function(){ …

女王范的霸气签名有关女王范的霸气

女王范的霸气签名有关女王范的霸气

霸气,女王,句子,火爆,热门,  有个性的女生,都喜欢在自己的空间里写一些让人觉得很有女王范的签名,这会让人觉得很霸气,下面请欣赏小编为大家推荐的女王范的霸气签名。女王范的霸气签名摘抄:1) 养只趾高气扬的猫,让它替我,叼一条秋刀鱼送你,不用…

Three.js如何实现雾化效果示例代码

Three.js如何实现雾化效果示例代码

示例代码,雾化效果,如何实现,电脑软件,js,前言本文主要给大家介绍了关于Three.js实现雾化效果的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。实现方法如果使用three.js实现雾化效果很简单,只需要在给场景scene对…

word设置自动分行的教程word设置自

word设置自动分行的教程word设置自

教程,方法,步骤,分行,设置自动,  word中经常需要使用到设置自动分行的技巧实行分行,数据的自动分行具体该如何进行设置呢?接下来是小编为大家带来的word设置自动分行的教程,供大家参考。word设置自动分行的教程设置自动分行步骤1:笔者下面以…