使用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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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
239军机修复记
2021/03/02 无线电
PHP4之COOKIE支持详解
2006/10/09 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
大学生学业生涯规划
2014/01/05 职场文书
黄金酒广告词
2014/03/21 职场文书
一年级学生评语
2014/04/23 职场文书
我的小天地教学反思
2014/04/30 职场文书
六年级小学生评语
2014/12/26 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
如何用threejs实现实时多边形折射
2021/05/07 Javascript