jQuery UI非ajax选项卡加载整个网站本身？

jQuery Tabs有一个很大的问题。

我试图加载我的网站产品页面上的标签…
当页面加载时，我会看到标签内容一秒钟(标准html标签不是ajax)，然后突然，我的整个网站加载在标签内。

我正在使用jquery ui选项卡演示页面中的标准代码。

<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，只是想知道有没有人看过这个。

非常感谢

解决方法

你是对的，这是BASE的中继标签。这是一个问题，你会遇到最新版本的jQuery UI(1.9)，它与1.8。 Tabs API有很多变化，但是直到您检查jQuery源代码，没有什么似乎会导致此问题。

> BASE元标记指示浏览器将标签中的href属性(用作标签内容的引用)从哈希标识变换为完整的URL(使用BASE标记值)。这是预期的行为。
>以前版本的Tabs UI会尝试猜测href是否真的是远程的，分离href tab值，然后将其与当前URL AND进行比较，并将其与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;
      }

这是jQuery UI Tabs在1.9.2版本中使用的：

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元标记值)。

到目前为止，我还没有找到任何方法来告诉标签“这是本地的，不要使用Ajax”使用正常的选项卡API。我可以为您提供什么，我做了什么来快速解决它(同时我问，重新检查，也许填写一个错误报告)：一个黑客。

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我很想添加自己的评论，但似乎jQuery开发人员将不会“修复”，因为他们认为问题在别的地方。来自bugtracker的报价：

I don’t see how this is non-trivial to fix…

Here’s the trivial,dynamic PHP implementation: ‘http://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’] . ‘#foo’.

It’s also fairly trivial to fix this in JavaScript,but I won’t provide sample code because that is the wrong place to be fixing this and should be highly discouraged. The behavior of links are clearly defined and consistent across all browsers. There is absolutely no reason people should be using incorrect URLs and then hacking around them in JavaScript.

Finally,it’s important to note that “fixing” this would mean breaking the correct behavior for everyone who uses properly. Keep in mind that this was fixed because people with proper URLs were running into the real bug that existed in the old code.

原文地址：https://www.jb51.cc/jquery/182361.html

jQuery UI非ajax选项卡加载整个网站本身？

解决方法

相关推荐