使用jQuery和ajax代替iframe的方法(詳解)
更新時(shí)間：2017年04月12日 09:21:33 投稿：jingxian
下面小編就為大家?guī)硪黄褂胘Query和ajax代替iframe的方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
iframe雖然好用，但是其弊端也很明顯，一是它不能使用于響應(yīng)式布局，iframe的使用必須指定高度，而響應(yīng)式布局的高度兵分固定的。其次iframe不易被搜索引擎的爬蟲解讀，特別是iframe中嵌套iframe，這是會(huì)被搜索引擎認(rèn)為是個(gè)死網(wǎng)站而被放過。
目前主流的應(yīng)用都使用了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(){//點(diǎn)擊li加載界面
var current = $(this),
target = current.find('a').attr('target'); // 找到鏈接a中的targer的值
$.get(target,function(data){
$("#iframeContent").html(data);
});
});
});
這樣做不僅滿足了響應(yīng)式布局，而且div也能被爬蟲認(rèn)識(shí)，故而更受歡迎！
以上這篇使用jQuery和ajax代替iframe的方法(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery的選擇器主要包括基本選擇器 子選擇器 特征選擇器 位置選擇器。2009-12-12
Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹
這篇文章主要介紹了Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹,同時(shí)介紹了jQuery 中的 Deferred 和 Promises,需要的朋友可以參考下2014-06-06
jQuery EasyUI 中文API Button使用實(shí)例
jQuery EasyUI 中文API Button使用小結(jié)，需要的朋友可以參考下。2010-04-04
JS在IE下缺少標(biāo)識(shí)符的錯(cuò)誤
今天在使用一個(gè)jQuery的插件時(shí)，發(fā)現(xiàn)在IE下總報(bào)錯(cuò)，但在Firefox下就很正常，所報(bào)的錯(cuò)誤就是：缺少標(biāo)識(shí)符！2014-07-07
jQuery實(shí)現(xiàn)輸入框的放大和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了JQuery ztree帶篩選、異步加載實(shí)例，zTree支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)，并支持極其靈活的checkbox或radio選擇功能，本文為大家進(jìn)行具體介紹2016-02-02
jquery是輕量級(jí)的js庫(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器。由于jQuery對象本身是一個(gè)集合。所以如果jQuery對象要轉(zhuǎn)換為dom對象則必須取出其中的某一項(xiàng)，一般可通過索引取出。2011-08-08
這篇文章主要介紹了jquery使用jxl插件導(dǎo)出excel的具體實(shí)現(xiàn)步驟,需要的朋友可以參考下2014-04-04
這篇文章主要為大家介紹了JQuery選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新
這篇文章主要為大家詳細(xì)介紹了jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10