iframe異步加載實(shí)現(xiàn)點(diǎn)擊左邊菜單加載右邊內(nèi)容實(shí)例講解
更新時(shí)間：2013年03月04日 14:47:57 作者：
iframe異步加載想必很多朋友對(duì)你都不會(huì)陌生,接下來將實(shí)現(xiàn)這樣一個(gè)功能左邊菜單不能刷新的情況下，異步加載右邊的內(nèi)容頁(yè)面，感興趣的你可以參考下本文或許對(duì)你有所幫助
關(guān)于iframe異步加載，我們常用的大都是左邊菜單欄右邊是內(nèi)容頁(yè)面，要求我們不能左邊菜單不能刷新的情況下，異步加載右邊的內(nèi)容頁(yè)面。
話不多說，做了一個(gè)實(shí)例大致是這樣的：
1、首先在你的項(xiàng)目中建立三個(gè)文件如：
2、在Default頁(yè)面引入jquery文件并在body中加入也下代碼：
復(fù)制代碼 代碼如下:
<div style="width: 20%; float: left">
<div id="butten" style="cursor: pointer;">
局部刷新(框架加載頁(yè)面)
</div>
<div id="hidden" style="display: none">
我是隱藏的，點(diǎn)擊局部刷新之后<br />
我就顯示，頁(yè)面加載我不會(huì)消失
</div>
</div>
<div id="page" style="width: 80%; float: right;">
<iframe src='1.htm' frameborder='0' style='border: 0; width: 100%; height: 99.4%;'>
</iframe>
</div>
<script type="text/javascript">
$(function () {
$("#butten").click(function () {
$("#hidden").show();
$("iframe").attr("src", "2.htm");
});
});
</script>
3、在1.htm和2.htm中隨便寫上什么都行，甚至可以直接這樣寫（什么html、title、body、title等均可不用寫）：
1.htm：
復(fù)制代碼 代碼如下:
頁(yè)面一<br />
原始頁(yè)面
2.htm：
復(fù)制代碼 代碼如下:
頁(yè)面二<br />
框架加載的頁(yè)面
4、效果如圖：
相關(guān)文章
jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果，實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery中table數(shù)據(jù)的值拷貝和拆分
在開發(fā)的過程中，經(jīng)常會(huì)遇到彈出框顯示前一頁(yè)table列表的情況，這時(shí)候會(huì)有好多方法來來解決。下面小編給大家介紹怎么用jquery將值拷貝到第二頁(yè)并拆分拷貝的值，需要的朋友參考下2017-03-03
Jquery Easyui驗(yàn)證組件ValidateBox使用詳解（20）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
resize事件是在窗口或框架的大小被調(diào)整時(shí)發(fā)生，包括最小化、最大化。在IE和Opera瀏覽器中，只要窗口邊框被拖動(dòng)，就觸發(fā)該事件，在Mozilla瀏覽器中，resize 事件只是在停止改變窗口大小時(shí)才會(huì)觸發(fā)。2011-07-07
jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-09-09
本文主要介紹了jquery實(shí)現(xiàn)頁(yè)面加載效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery加載及解析XML文件的方法,結(jié)合實(shí)例形式分析了xml文件的創(chuàng)建及jQuery針對(duì)xml文件的獲取、解析相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery異步提交表單的兩種方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table,需要的朋友可以參考下2014-05-05
Jquery uploadify 多余的Get請(qǐng)求(404錯(cuò)誤)的解決方法
下面小編就為大家?guī)硪黄狫query uploadify 多余的Get請(qǐng)求(404錯(cuò)誤)的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01