jquery - jQuery UIの非ajaxタブは、Webサイト全体をそれ自体にロードしますか？

Question

jQueryタブに大きな問題があります。

私のサイトの製品ページにタブを読み込もうとしています...ページが読み込まれると、タブのコンテンツが1秒間表示され（標準のhtmlタブはajaxではありません）、突然Webサイト全体がタブ内に読み込まれます。

jqueryuiタブのデモページの標準コードを使用しています。

<div id="productTabs">
    <ul>
        <li><a href="#tabDescription">Description</a></li>
        <li><a href="#tabSpecs">Specifications</a></li>
        <li><a href="#tabReviews">Reviews</a></li>
        <li><a href="#tabDownloads">Downloads</a></li>
    </ul>
    <div id="tabDescription">test</div>
    <div id="tabSpecs">test</div>
    <div id="tabReviews">test</div>
    <div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#productTabs").tabs();});</script>

しかし、私はサイトの周りに他の多くのjavascriptを持っており、誰かがこれを以前に見たことがあるかどうか疑問に思っています。

どうもありがとう

score 30 · Accepted Answer

そうです、これは BASE メタタグです。これは、最新バージョンの jQuery UI (1.9) で直面する問題であり、1.8 で機能しました。Tabs API には多くの変更が加えられましたが、jQuery ソースコードを確認するまで、この問題の原因は何もないように見えました。

BASE メタタグは、(タブコンテンツの参照として使用する) タブの href 属性を hash+id から完全な URL (BASE タグ値を使用) に変換するようブラウザに指示します。それが期待される動作です。
以前のバージョンのタブ UI では、href が本当にリモートかどうかを推測するのが難しく、href タブの値を分割し、それを現在の URLおよびBASE タグと比較して、実際にローカルかどうかを判断していました。
jQuery の最新バージョンは BASE タグの値をチェックしません。
そのため、最新バージョンを BASE メタタグで使用すると、Ajax を使用してタブコンテンツを読み込もうとし、それ自体 (または BASE URL にあるもの) をリロードします。

これは、バージョン 1.8.24 で使用された jQuery UI タブです。

    this.anchors.each(function( i, a ) {
      var href = $( a ).attr( "href" );
      // For dynamically created HTML that contains a hash as href IE < 8 expands
      // such href to the full page url with hash and then misinterprets tab as ajax.
      // Same consideration applies for an added tab with a fragment identifier
      // since a[href=#fragment-identifier] does unexpectedly not match.
      // Thus normalize href attribute...
      var hrefBase = href.split( "#" )[ 0 ],
        baseEl;
      if ( hrefBase && ( hrefBase === location.toString().split( "#" )[ 0 ] ||
          ( baseEl = $( "base" )[ 0 ]) && hrefBase === baseEl.href ) ) {
        href = a.hash;
        a.href = href;
      }

これは、バージョン 1.9.2 で jQuery UI Tabs が使用するものです。

    function isLocal( anchor ) {
      return anchor.hash.length > 1 &&
        anchor.href.replace( rhash, "" ) ===
          location.href.replace( rhash, "" )
            // support: Safari 5.1
            // Safari 5.1 doesn't encode spaces in window.location
            // but it does encode spaces from anchors (#8777)
            .replace( /\s/g, "%20" );
     }

Tabs コードが大幅に書き直されたため、コードの編成は異なりますが、その考えは理解できます ( $( "base" )[ 0 ]は BASE メタタグの値です)。

これまでのところ、通常のタブ API を使用して「これはローカルです。Ajax を使用しないでください」とタブに伝える方法は見つかりませんでした。私があなたに提供できるのは、その間にそれをすばやく修正するために私がしたことです（私が尋ねている間、再確認し、おそらくバグレポートに記入してください）：ハック。

    function isLocal( anchor ) {
      return anchor.hash.length > 1 &&
        ( (anchor.href.replace( rhash, "" ) === location.href.replace( rhash, "" ).replace( /\s/g, "%20" )) ||
          (anchor.href.replace( rhash, "" ) === $( "base" )[ 0 ].href));
    }

これは、新しいバージョンに加えて、以前のバージョンで行われたチェックです。

最新の jQuery UI の縮小されていないコピーで、 isLocal 関数をそれに置き換えます。次に、ファイルを縮小します。元のバージョンを置き換えます。テスト。

Firefox（17.0.1）とChromium（18.0.1025.168）でうまくいきました。

欠点は、(CDN からの) サードパーティのコピーを使用できないことです。私のアプリケーションのほとんどはイントラネットで使用されているので、私にとっては問題ではありません。

誰かがより良い解決策を見つけた場合、または jQuery UI コードをハッキングせずにそれを行う方法を知っている場合は、お知らせください。

更新: このバグレポートを見つけました (重複がいくつかあります) : http://bugs.jqueryui.com/ticket/7822問題は別のところにあります。バグトラッカーからの引用:

これがどのように修正するのが重要なのかわかりません...

簡単で動的な PHP の実装を次に示します: 'http://' 。$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] . 「#フー」。

JavaScript でこれを修正するのもかなり簡単ですが、サンプルコードは提供しません。なぜなら、それはこれを修正するのに不適切な場所であり、非常に落胆させるべきだからです。リンクの動作は明確に定義されており、すべてのブラウザーで一貫しています。間違った URL を使用して、JavaScript でハッキングする必要があるという理由はまったくありません。

最後に、これを「修正」することは、適切に使用するすべての人にとって正しい動作を壊すことを意味することに注意することが重要です。適切な URL を持つ人々が古いコードに存在する実際のバグに遭遇したため、これは修正されたことを覚えておいてください。

score 20 · Accepted Answer

これは、.js 内で機能する簡単な回避策であるため、サードパーティのコピーを jquery.ui に使用できます。
Jquery UI 1.10.2 でテスト済み。
ベースメタタグの問題と、オプションの末尾のスラッシュ n url の問題を解決します。

$("#mytabs UL LI A").each(function() {
    $(this).attr("href", location.href.toString()+$(this).attr("href"));
});
$("#mytabs").tabs();

score 7 · Accepted Answer

@MV が述べたように、問題は、jquery が私の Web ページの上にある base タグを混同していることです。そのため、jQuery ui ファイルの魔女を編集する代わりに、そのように jQuery を使用してベースタグを削除しました。

<script>
    jQuery(function() {
        jQuery('base').remove();
        jQuery( "#tabs" ).tabs();                   
    });
</script>

特定のページのタブコントロールのためにベースタグを一時的に削除しても構わないので、これはうまくいくようです。しかし、これらの定義が必要な場合の解決策も考えていました。たとえば、これらのベースタグを配列に収集し、それらを削除してから、tab() メソッドを実行した後、それらを再度追加します。これは少しst..idに見えますが、 tabs() はリスナーパターンを実装していません。私はそれを試していませんし、まだ試していません。とにかく、jQuery ui には確かにバグがあるようです!

score 2 · Accepted Answer

アンジェリカは私にぴったりの答えを持っていました。タブのセレクターとしてクラス「タブ」を持つページのrequirejsファイルでこれを使用しました。

jQuery(".tabs ul li a").each(function() {
    jQuery(this).attr("href", location.href.toString()+jQuery(this).attr("href"));
});
jQuery(".tabs").tabs();

score 0 · Accepted Answer

baseタブを機能させるためだけに属性をいじります。多すぎる

別のハッキーな回避策：

element.tabs({
  create: function(event, ui){
    var tabsData = $(event.target).data('ui-tabs');
    tabsData.anchors.each(function(idx, anchor){
      var contentId = $(anchor).attr('href');
      var $panel = $(tabsData.panels[idx]);
      $panel.html($(contentId).remove().html());
    });
  },
  beforeLoad: function(event, ui){
    event.preventDefault();
  }
});

でテスト済みjQuery UI - v1.11.1

jquery - jQuery UIの非ajaxタブは、Webサイト全体をそれ自体にロードしますか？

7 に答える 7

Related

Reference