如何让锚链接在 Jquery Mobile 中工作？答案

【问题标题】：How to get Anchor Links to work in Jquery Mobile?如何让锚链接在 Jquery Mobile 中工作？
【发布时间】：2012-03-15 19:21:28
【问题描述】：

Jquery Mobile 已决定将锚链接视为排序的页面请求。但是，如果您有大量博客文章具有指向同一页面的锚链接（即 href="#specs"），这并不好。

有没有办法在我知道我不会使用它的特定页面上禁用 jquery mobile 的锚链接使用，以便我可以按预期使用锚链接，以下拉到页面的一部分？

我只需要同一页面上的锚链接的解决方案（即：href="#specs"）。

谢谢

【问题讨论】：

标签： javascript jquery jquery-mobile hyperlink

【解决方案1】：

您可以尝试在锚标记上添加data-ajax="false"。

没有 Ajax 的链接

指向其他域或具有 rel="external" 的链接， data-ajax="false" 或目标属性不会被 Ajax 加载。相反，这些链接将导致整个页面刷新，没有动画过渡。两个属性（rel="external" 和 data-ajax="false"）效果相同，但语义不同：rel="external" 应该在链接到另一个站点或域时使用，而 data-ajax="false" 对于简单地选择您的页面中的页面很有用通过 Ajax 加载域。由于安全限制，框架总是从 Ajax 中选择指向外部域的链接行为。

参考 - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

【讨论】：

我想你的意思是把它放在链接标签上（而不是锚标签）？
这在链接到同一个 jquery 移动应用程序中的外部页面（不是链接）时也很有用，我的意思是，你有一个从 index.html 指向 create.html#creations 的链接。它有时像 JQM 命令一样工作，但有时不能，所以data-ajax="false" 属性是一个很好的解决方案。

【解决方案2】：

如果您像我一样，正在转换现有网站，并且不想现在浏览每个页面。您可以在标题中添加一行代码，并且您的所有标题和所有现有的内部锚链接都将添加 data-ajax="false" 标记。

当然，这假设您已经在标头中包含了自己的 javascript 文件。如果你不是，你将不得不触摸每一页。但是我已经在每个页面中都包含了一个 javascript 文件，所以我添加了这一行...

$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });

这在您的 $(document).ready() 块中。如果你还没有那个块，这里是整个块。

$(document).ready(function() {
  $("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});

希望这会有所帮助。它与 user700284 提供的解决方案相同，但采用自动化方式。

【讨论】：

【解决方案3】：

您可以在页面末尾添加以下代码：

 <script type="text/javascript">
     $('a.native-anchor').bind('click', function(ev) {
         var target = $( $(this).attr('href') ).get(0).offsetTop;
         $.mobile.silentScroll(target);
         return false;
     });
 </script>

并将“native-anchor”类添加到您的锚链接。

这不是一个完整的解决方案，因为浏览器的后退按钮会将您移动到上一页而不是链接的位置，但这比链接根本不起作用要好。

我在这里找到了这个解决方案：jQuery Mobile Anchor Linking

【讨论】：

如果页面是从另一个页面通过 ajax 加载的（在 JQuery mobile 中通常是这种情况），请确保将代码添加到 data-role="page" 元素的末尾。

【解决方案4】：

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

【讨论】：

【解决方案5】：

首先您必须将此代码放入 custom.js 文件中

$(document).bind('mobileinit', function () {
    $.mobile.loader.prototype.options.disabled = true;
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.loadingMessage = false;
});

然后在加载jquery mobile js之前将此文件添加到您的网页中。因为'mobilinit' 事件会立即触发

【讨论】：

【解决方案6】：

谢谢这个解决方案对我有用

<script>
  $(document).ready(function() {
    $("a").each(function() {
      if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
    });
  });
</script>

我将# 替换为index.php，这是我的文档根目录。但是，它不适用于表单按钮，即input type="submit"

【讨论】：

【解决方案7】：

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
        $('a[href*="#component"]').each(function () {
            // then set data-ajax to false, 
            $(this).attr("data-ajax", false);
            // at this point you can add the class to your target a tags. 
            // You can do it elsewhere but because for this example my 
            // 'a' tags are automatically generated so I just add the class here
            $(this).addClass('in-pagelink');
            // then target the class and bind to a click event 
            $('a.in-pagelink').bind('click', function (ev) {
                // here I redirect the page with window.location.assign
                // as opposed to window.location.href. I find that it works better
                window.location.assign(this.href);
                // then I close my navigation menu
                closeAll();
            });

        });

【讨论】：