使用jQuery和ajax代替iframe的方法(詳解)
更新時(shí)間：2017年04月12日 09:21:33 投稿：jingxian
下面小編就為大家?guī)?lái)一篇使用jQuery和ajax代替iframe的方法(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
iframe雖然好用，但是其弊端也很明顯，一是它不能使用于響應(yīng)式布局，iframe的使用必須指定高度，而響應(yīng)式布局的高度兵分固定的。其次iframe不易被搜索引擎的爬蟲(chóng)解讀，特別是iframe中嵌套iframe，這是會(huì)被搜索引擎認(rèn)為是個(gè)死網(wǎng)站而被放過(guò)。
目前主流的應(yīng)用都使用了ajax代替了iframe。
html：
<ul class="nav navbar-nav" id="indexMenu"> <li><a target="main/main.html">首頁(yè)</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也能被爬蟲(chóng)認(rèn)識(shí)，故而更受歡迎！
以上這篇使用jQuery和ajax代替iframe的方法(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jquery自定義滾動(dòng)條插件示例,需要的朋友可以參考下2014-02-02
jquery+CSS3模擬Path2.0動(dòng)畫(huà)菜單效果代碼
這篇文章主要介紹了jquery+CSS3模擬Path2.0動(dòng)畫(huà)菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)推拉門效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery發(fā)布已經(jīng)十年了，挺讓人難以置信。過(guò)去的這些年Web開(kāi)發(fā)變了很多，jQuery也隨之變化著。在這個(gè)過(guò)程中，團(tuán)隊(duì)一直在對(duì)確保過(guò)往代碼的兼容支持和獲取最好的Web開(kāi)發(fā)實(shí)踐的現(xiàn)實(shí)之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本2016-06-06
jQuery編程動(dòng)畫(huà)的基本方法示例詳解
這篇文章主要為大家介紹了jQuery編程動(dòng)畫(huà)基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的帶有索引按鈕且自動(dòng)輪播切換特效，圖片簡(jiǎn)單大方，感興趣的小伙伴可以參考下。2015-09-09
有朋友問(wèn)GridView控件對(duì)于跨行合并的問(wèn)題，這可以用控件嵌套來(lái)完成，當(dāng)然，我更喜歡在前臺(tái)來(lái)用JS來(lái)控制網(wǎng)頁(yè)元素的樣式，而后臺(tái)僅僅是根據(jù)客戶的請(qǐng)求，來(lái)返回?cái)?shù)據(jù)。2011-09-09
在頁(yè)面上圖片比較多的時(shí)候，打開(kāi)一張頁(yè)面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對(duì)于高清晰的圖片，占了幾百K的空間。那么我們?nèi)绾尾拍芨淖冞@種狀況呢，這就是今天我們要探討的問(wèn)題了。2015-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery樹(shù)插件zTree的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery中創(chuàng)建實(shí)例與原型繼承揭秘
在普通情況下我們要用原生類、或者自定義類創(chuàng)建實(shí)例要用new運(yùn)算符，使構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，并且實(shí)例繼承構(gòu)造器prototype上的所有公有方法2011-12-12