jQuery教學-jQuery Include HTML、插入html、jquery替代iframe

星期三, 5月 18, 2011

使用jQuery來達到如iframe、asp include 和 php include 的效果


jQuery能做到的比iframe連結另一個網頁html內容來的活用,使用css做樣式變化,也較有彈性。再次比較asp includephp include 這樣的方式,無須使用以上asp和php伺服器就能達到你想要的include html。(注意:此方法get()屬於ajax需要在server上執行。)

下列程式變化加入了選單(Menu list)做連結的切換,分別使用jquery include
三個html網頁檔案(a.html、 b.html、c.html)。
希望這樣的方式能幫助到您。

HTML

<ul class="list-side">
<li><a target="a.html" >about</a></li>
<li><a target="b.html" >news</a></li>
<li><a target="c.html" >product</a></li>
<li><a href="http://ucmic.blogspot.com/" target="_blank" >contact</a></li>
</ul>

<div id="iframe">
<!--jquery 插入html 位址-->
</div>

jQuery

$(document).ready(function(){ 
$.get("a.html",function(data){ //初始將a.html include div#iframe
$("#iframe").html(data);
}); 
$(function(){
$('.list-side li').click(function() {
  // 找出 li 中的超連結 href(.html)
 var $this = $(this),
 _clickTab = $this.find('a').attr('target'); // 找到連結a中的targer標籤值
 $.get(_clickTab,function(data){
 $("#iframe").html(data); 
 });
})
})
});


修改新增
改用href做連結選擇,並在#iframe 新增next連結(下個頁面),使在#iframe區塊裡不重新讀取新頁面或覆蓋頁面的情況下連結。

[ DEMO 程式碼下載請連結 http://ucamc.com/e-learning/javascript/113-jquery-include-html.html ]


您或許對這些文章有興趣

13 回應

  1. 您好,我使用了您的語法,但是在firefox及chrome下分頁只有純文字,並沒有連結(IE能正常執行)。請問有甚麼解決辦法嗎?感謝

    回覆刪除
  2. 您可能在使用上有些問題,可以下載程式碼demo看看。謝謝

    回覆刪除
  3. 下載程式碼的地方是不是壞掉了?

    回覆刪除
  4. 連結已經更新。謝謝。

    回覆刪除
  5. 網誌管理員已經移除這則留言。

    回覆刪除
  6. 我跟樓上一樣有相同狀況
    用chrome開您的網頁是沒問題
    用IE Demo也是沒問題
    但是下載Demo在Chrome就掛了@_@
    不會切頁,感謝.

    回覆刪除
  7. 此方法get()屬於ajax需要在server上執行。謝謝。

    回覆刪除
  8. 請問一下iframe頁面裡的連結該如何設定才不會跳出frame視窗?嘗試對加入target="_self"和target="_parent"都還是會覆蓋原本頁面... 謝謝囉!

    回覆刪除
  9. 修改新增
    改用href做連結選擇,並在#iframe 新增next連結,使在#iframe區塊裡不重新讀取新頁面或覆蓋頁面的情況下連結。請在頁面觀看下載。謝謝

    回覆刪除
  10. 終於解決困擾我多日的問題,實在太感謝了!下定決心要好好學習~

    回覆刪除
  11. 您好:
    我下載您的範例來測用
    想請問Contact這段Code是否能如同a.html, b.html, c.html模式,不要另開,而開在右方呢?
    有嘗試調整為
    target="http://ucmic.blogspot.com/"
    無反應,似乎是不行丫

    謝謝啦!!

    回覆刪除
    回覆
    1. 不好意思!這個方式應當不能夠崁入外部網址http://,謝謝。

      刪除

Follow by Email

聯絡表單

名稱

以電子郵件傳送 *

訊息 *