jQuery UI 非 ajax 选项卡将整个网站加载到自身中？

Question

jQuery 选项卡有一个大问题。

我正在尝试加载我的网站产品页面上的选项卡...当页面加载时，我看到选项卡内容一秒钟(标准 html 选项卡不是 ajax)，然后突然我的整个网站加载到选项卡内。

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

<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，只是想知道是否有人以前见过这个。

非常感谢

Answer 1

你是对的，这是 BASE 元标记。这是您使用最新版本的 jQuery UI (1.9) 时会遇到的问题，它适用于 1.8。 Tabs API 进行了很多更改，但在您检查 jQuery 源代码之前，似乎没有什么会导致此问题。

1. BASE 元标记指示浏览器将选项卡中的 href 属性(用作选项卡内容的引用)从 hash+id 转换为完整 URL(使用您的 BASE 标记值)。这是预期的行为。
2. 以前版本的选项卡 UI 会尝试猜测 href 是否真的是远程的，拆分 href 选项卡值，然后将其与当前 URL AND 与 BASE 标记进行比较，然后确定它是否实际上是本地的。
3. 最新版本的 jQuery 不会检查 BASE 标记值。
4. 因此，最新版本在与 BASE 元标记一起使用时，将尝试使用 Ajax 加载选项卡内容，重新加载自身(或 BASE URL 中的任何内容)。

这是 jQuery UI Tabs 在 1.8.24 版本中使用的内容:

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

到目前为止，我还没有找到任何方法来使用普通选项卡 API 告诉选项卡“这是本地的，不要使用 Ajax”。我可以为您提供的是我同时快速修复它的方法(在我询问、重新检查并可能填写错误报告的同时):一个 hack。

    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)。对我来说这不是问题，因为我的大多数应用程序都在 Intranet 中使用。

如果有人找到更好的解决方案或知道如何在不破解 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.