jQuery Mobile - 窗口加载后跳转到顶部

Posted 2023-03-06

【中文标题】jQuery Mobile - 窗口加载后跳转到顶部

【英文标题】：jQuery Mobile - Jumps To Top After Window Load

【发布时间】：2017-06-10 15:53:56

【问题描述】：

我们为m.swisswebcams.ch 使用jQuery mobile。当我在页面仍在加载时向下滚动时，它似乎总是在页面加载时再次向上跳（即window.onload）。

如何解决这个问题？

---

重现此问题的步骤：

在您的移动浏览器中打开m.swisswebcams.ch 在页面仍在加载时立即向下滚动 等到页面自行跳转到顶部 （并不总是会发生。所以有时您可能需要再试一次。）

---

结果

打开网站：

向下滚动：

自动跳到顶部（不需要）：

【问题讨论】：

如果你把它注释掉会发生什么：data.deferred.resolve( data.absUrl, data.options, page );

我认为这是 jquery mobile 的一个已知问题，查看此link

@mplungjan 你说得对，大喊大叫无助于解决问题，但感觉更好，因为这个 bug 似乎已经存在了很长时间，而且 jQuery 似乎没有人关心它。所以无论如何，谢谢你的帮助。但是你在哪里看到“data.deferred.resolve”，我在ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/…找了，没找到。

我在你的网站上看到了。

@AminurRashid 这可能是相关的，但不一样，因为我没有像你提到的例子那样做任何静音滚动。请给这个问题打分，因为这个错误真的很烦人，而且不知何故没有人关心它。

【参考方案1】：

嗯，这种行为在 jQuery Mobile 中是默认的（actual v. 1.4.5）。来自 jQuery Mobile 源代码：

    // hide ios browser chrome on load if hideUrlBar is true this is to try and do it as soon as possible
    if ( $.mobile.hideUrlBar ) 
        window.scrollTo( 0, 1 );
    

这就是之前cmets中引用的silentScroll函数：

....
    // Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
    silentScroll: function( ypos ) 
        if ( $.type( ypos ) !== "number" ) 
            ypos = $.mobile.defaultHomeScroll;
        

        // prevent scrollstart and scrollstop events
        $.event.special.scrollstart.enabled = false;

        setTimeout(function() 
            window.scrollTo( 0, ypos );
            $.mobile.document.trigger( "silentscroll",  x: 0, y: ypos );
        , 20 );

        setTimeout(function() 
            $.event.special.scrollstart.enabled = true;
        , 150 );
    ,
...

自 iOS 7 以来，此解决方法不再有效，但它是进入“全屏模式”最需要的功能之一（请参阅 SO 上的很多问题）。

这实际上是参考：iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? 并详细解释了更新的 iOS 版本。

只是猜测，也许你没有注意到这种行为，因为你有更新的 iOS 版本，或者你不需要全屏，因为你已经在手动滚动了。

您可以通过覆盖 JQM 设置来防止初始滚动顶部：

<script type="text/javascript">
    $(document).bind("mobileinit", function() 
        $.mobile.ajaxEnabled = false;
        $.mobile.hideUrlBar = false; // <---- add this line
    );


    var GLOBAL = 
        language : 'de'
    ;
</script>

试试看，如果这能解决您的问题，请告诉我。在我的测试中，它起作用了。

编辑： 这种烦人的行为已在即将发布的 1.5 版 JQM 中得到修复：

参考：jQuery Mobile 1.5.0-alpha1 Changelog

如果用户已经滚动，则修复页面加载以防止静默滚动 (#3958, 0996492)

【讨论】：

是的，这成功了！赏金已正式结束，但我认为/希望我仍然可以给你应得的 100 分！非常感谢。

很高兴这对您有所帮助。如果您愿意，请随时再次询问更多信息。

【参考方案2】：

如评论中所述：此行为是设计使然。有两种请求 URL 的方式：一种是“完整”或“正常”或“非 javascript”请求，例如输入 URL、单击链接或提交表单，另一种方式是后台 ajax 请求，其中 javascript在 html 容器中填充响应。第一种方式总是在页面加载时跳转到页面顶部（恕我直言，在所有浏览器中，除非您通过 F5 刷新已经加载的页面）。

更新

作为网站程序员，您可以自行解决此浏览器行为。只需使用jQuery loader 或jQuery Mobile events 在页面加载时显示一些状态栏或旋转圆圈。

【讨论】：

啊，好的，但这是为什么呢？如果页面在页面加载/渲染/请求开始时跳转到右上角而不是结束时会更有意义。是否可以更改跳转到顶部的触发时间？

显然不是这样的用户友好行为

这将是每个浏览器的浏览器编程请求，这只是“正常”行为。首先装满杯子，然后喝咖啡 :-) 使用 jquery 移动事件，您可以 1.) 在页面加载时显示一些指示器，2.) 在浏览器中呈现完全加载的页面，请参阅 api.jquerymobile.com/category/events

好的，咖啡的例子很有意义 :) 我理解这种行为对于 (2) 是有意义的，因为浏览器需要网站 first 才能跳转到任何地方，但是关于（1）网站在加载时已经开始显示，因此浏览器应该能够跳转到顶部 - 或者将其与普通网站（非 jquery）进行比较，它在加载时也会显示部分内容，但不会跳转当网站完全加载时置顶 - 还是我完全错过了你的观点？