使用jQuery和ajax代替iframe
2015-09-07 17:35
621 查看
iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的。其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过。
目前主流的应用都使用了ajax代替了iframe。
html:
代替iframe的div:
js操作:
这样做不仅满足了响应式布局,而且div也能被爬虫认识,故而更受欢迎!
目前主流的应用都使用了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中的$("")与原生的document.getElementById("")的区别
- jQuery中实现each()
- jquery实现Slide Out Navigation滑出式菜单效果代码
- 如何在一个页面上让多个jQuery版本共存
- 购物车功能实现 语言: php+MySQL+jQuery+Ajax
- 通过前台jquery调用本地WebService(二) 传递SOAP体
- jQuery数组($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)处理函数详解
- JQuery上传插件Uploadify使用详解
- jQuery UI 插件Datepicker Widget
- jquery实现通用的内容渐显Tab选项卡效果
- jquery 简单的动画效果
- jquery form表单序列化成json格式
- jquery仅用6行代码实现滑动门效果
- jQuery中,子页面与父页面之间的调用方法
- jQuery编程规范与最佳实践(附带一些个人的笔记)
- 通过前台jquery调用本地WebService(一) SOAP体
- jquery 淡入淡出
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例
- jquery的幻灯片图片切换效果代码分享
- JQuery中$.ajax()方法参数详解