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


Posted in jQuery onApril 12, 2017

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的方法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
基于jQuery实现瀑布流页面
Apr 11 #jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
You might like
PHP获取文件扩展名的4种方法
2015/11/24 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
微信小程序获取用户openid的实现
2018/12/24 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python选课系统开发程序
2016/09/02 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python 错误处理 assert详解
2020/04/20 Python
自我评价的正确写法
2013/09/19 职场文书
市场部规章制度
2014/01/24 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
标准毕业生自荐信
2014/06/24 职场文书
求职意向书
2014/07/29 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript