jQuery load 跨瀏覽器(Chrome &Firefox)- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1856

會員總數：246256
討論主題：189807

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> jQuery load 跨瀏覽器(Chrome &Firefox)

[]

[我要回覆]

jQuery load 跨瀏覽器(Chrome &Firefox)
價值 : 10 QP 點閱數:3199 回應數:4

樓主

wen

10	28
479	90

發送站內信

因Html5開始不支援iframe，試著嘗試將iframe取代成div
但在進行測試時，發現IE8可正常的顯示div0.div1...裡面load的網頁內容，但以其他瀏覽器測試卻無法正常顯示
於是我將click裡面的load寫死，發現其他瀏覽器又可正常顯示寫死的網頁
這一頁上面有4個tab,每個tab各對應一個class為tab-pane的div
我想做的是當點選tab的時候，在載入對應的網頁

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
   <link href="../css/333.css" rel="stylesheet" /> 
     <script src="http://code.jquery.com/jquery.js"></script>
  <script src="../Scripts/bootstrap-tab.js"></script> 
<script>   
    $(function () {
            $('#myTab a:first').tab('show');
            var name = $('.tab-pane').get($('.active').index()).ref;
            $('#div0').load(name);
            $('#myTab a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                name = $('.tab-pane').get($('.active').index()).ref;                 
                var divname = '#div' + $('.active').index();
                $(divname).load(name);
            })
        })
</script>
</head>
<body> 
    <form id="form1" runat="server">
    <div>
<ul class="nav nav-tabs" id="myTab">
  <li ><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane" id="home" ref="../File/333.aspx"><div id="div0"></div></div>
  <div class="tab-pane" id="profile" ref="../File2/222.aspx"><div id="div1"></div></div>
  <div class="tab-pane" id="messages" ref="../File/111.aspx"><div id="div2"></div></div>
  <div class="tab-pane" id="settings" ref="../File/444.aspx"><div id="div3"></div></div>
</div>
 </div>
    </form>
</body>
</html>

請教各位前輩，是Code哪裡有錯嗎?!

搜尋相關Tags的文章： [ jQuery ] , [ Bootstrap ] ,
本篇文章發表於2013-11-21 15:45

1樓作者回應 wen	我找到答案了，參考了Twitter-Bootstrap tabs load container content via AJAX 將script改寫之後，chrome可以正常執行了我將ref改成href塞在<a>中 script的寫法改成 $(document).ready(function () { $('#myTab a:first').tab('show'); $.get($('#myTab a:first').attr('href'), function (data) { $($('#myTab a:first').attr('data-target')).html(data) }); $('#myTab a').click(function (e) { e.preventDefault() var loadurl = $(this).attr('href') var targ = $(this).attr('data-target') $.get(loadurl, function (data) { $(targ).html(data) }); $(this).tab('show') }); }); 目前還沒試Firefox可不可以，這個經驗也給遇到相關問題的人參考本篇文章回覆於2013-11-22 18:41 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓最有價值解答浩瀚星空	其實很早我就給成ajax的方式了。主因倒也不是因為html5。而是iframe本身就不是很好的東西。雖然在一些設計上也的確很方便。但在後期我也開始放棄iframe，也改用了ajax的配合方式。本篇文章回覆於2013-12-04 00:26 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應 wen	謝謝~浩瀚星空大，只是現在還有些地方，還是不知道怎麼擺脫iframe,像是將網頁放進div後，div裡面有按鈕需要傳值時，網頁無法連到按鈕點下去後後端的event執行這方面的話，是不是無法像一般網頁直接下onclick去執行後續的動作，請教一下是這樣嗎? 本篇文章回覆於2013-12-05 17:32 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓回應浩瀚星空	你說的因該是事件觸發的問題。確實，因淪重新載入的頁面，其原本的 click 事件不會再給與。所以除了用你說的onclick外。其實jquery也有提供live的應用。也就是說。你原本可能是用 $("$bb").click({}) 改成使用 $("$bb").live('click',{}) 這樣的話。就不用擔心因重取頁面之後事件消失的問題。本篇文章回覆於2013-12-24 03:10 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓作者回應 wen	我找到答案了，參考了Twitter-Bootstrap tabs load container content via AJAX 將script改寫之後，chrome可以正常執行了我將ref改成href塞在<a>中 script的寫法改成 $(document).ready(function () { $('#myTab a:first').tab('show'); $.get($('#myTab a:first').attr('href'), function (data) { $($('#myTab a:first').attr('data-target')).html(data) }); $('#myTab a').click(function (e) { e.preventDefault() var loadurl = $(this).attr('href') var targ = $(this).attr('data-target') $.get(loadurl, function (data) { $(targ).html(data) }); $(this).tab('show') }); }); 目前還沒試Firefox可不可以，這個經驗也給遇到相關問題的人參考本篇文章回覆於2013-11-22 18:41 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓最有價值解答浩瀚星空	其實很早我就給成ajax的方式了。主因倒也不是因為html5。而是iframe本身就不是很好的東西。雖然在一些設計上也的確很方便。但在後期我也開始放棄iframe，也改用了ajax的配合方式。本篇文章回覆於2013-12-04 00:26 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應 wen	謝謝~浩瀚星空大，只是現在還有些地方，還是不知道怎麼擺脫iframe,像是將網頁放進div後，div裡面有按鈕需要傳值時，網頁無法連到按鈕點下去後後端的event執行這方面的話，是不是無法像一般網頁直接下onclick去執行後續的動作，請教一下是這樣嗎? 本篇文章回覆於2013-12-05 17:32 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓回應浩瀚星空	你說的因該是事件觸發的問題。確實，因淪重新載入的頁面，其原本的 click 事件不會再給與。所以除了用你說的onclick外。其實jquery也有提供live的應用。也就是說。你原本可能是用 $("$bb").click({}) 改成使用 $("$bb").live('click',{}) 這樣的話。就不用擔心因重取頁面之後事件消失的問題。本篇文章回覆於2013-12-24 03:10 == 簽名檔 == --未登入的會員無法查看對方簽名檔--