jQuery Mobile 页面上的视频标签导致页面跳转到顶部答案

【问题标题】：Video tag on jQuery Mobile page causes page to jump to topjQuery Mobile 页面上的视频标签导致页面跳转到顶部
【发布时间】：2014-06-02 07:09:19
【问题描述】：

我一直在开发一个 jQuery Mobile 网站，并注意到一旦页面加载，它会在一两秒后跳回页面顶部 - 如果用户立即向下滚动，则会产生可怕的用户体验.

事实证明，只有当页面上存在 HTML 5 VIDEO 标签时才会发生这种情况 - 即使它没有关联的脚本、绝对大小，即使它位于 iframe 中。

我做了一个示例测试页来演示：

如何测试行为

打开jsfiddle http://jsfiddle.net/MR966/1
点击Run
在输出面板中单击立即并按几次空格键向下滚动。您必须在页面加载时立即执行此操作。
加载 Youtube 视频后，页面将跳转到顶部。
如果速度不够快，请单击Run，然后重试。

`<HEAD>`

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />    
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"

`<BODY>`

    <h1>JQuery Mobile Video Jump</h1>

    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>
    <div class="fake-content"></div>

    <iframe width="640" height="390" src="//www.youtube.com/embed/EQ1HKCYJM5U" frameborder="0" allowfullscreen></iframe>

内容可以是任何东西——只要足够长到至少一个屏幕的高度。

.fake-content
{
    margin: 1em;
    background: orange;
    height: 10em;
}

注意事项

删除 jQuery Mobile 会停止这种行为：http://jsfiddle.net/MR966/2/（你会看到背景是黄色的，表明它没有被初始化）。所以它肯定是在做一些事情来导致这种情况。
删除视频会停止此行为。
纯视频标签和 YouTube 会发生这种情况 - 考虑到它们位于外部加载的 iFrame 中，这有点令人惊讶。
“视频”一词在 jQuery Mobile 源代码中没有出现一次！
这发生在 Chrome / iPad / IE / Firefox 上。
在 iPad 上尤其糟糕，因为页面不会跳转到顶部，直到滚动因减速而完全停止。
如果您没有发现问题，请继续尝试，使用较慢的 Internet 连接或将 HTML 从 JSFiddle 复制到本地页面。
在我包含其他资源的实际页面上，这比这个简单的快速测试页面上的问题要大得多。

我的每个页面上都有视频，如果我无法解决这个问题，我需要在最后一刻放弃 JQM：-/

【问题讨论】：

JQM 在完全加载后滚动到顶部。如果您删除视频，行为不会改变。检查此答案以覆盖滚动stackoverflow.com/a/21989837/1771795
但具有讽刺意味的是，这种跳跃问题只发生在初始页面加载时。这是由于 $window.load 与试图隐藏 iOS 工具栏有关。我设法禁用它并在下面添加了一个答案

标签： javascript jquery-mobile

【解决方案1】：

这是正常的预期行为，让我解释一下原因。

当页面内容大于可用页面高度时，jQuery Mobile 会将页面滚动到顶部，然后再转换到其他页面。发生这种情况是因为，如果您转换完全滚动的页面并且第二页不够高，您将面临空白屏幕。所以 jQuery Mobile 需要在转换发生之前更正当前的可视位置。

这很容易通过 iScroll 插件 + jQuery Mobile 的 iScrollView 扩展来解决。你想要感觉不同，一切都会好起来的。

这是因为 iScroll div 容器的高度与屏幕高度一样高，而内部 div 是可滚动的，并且可以根据需要获取任意高度。因为最上面的 div 很高，因为可用的屏幕高度页面通常会过渡而不会发生不必要的跳跃。

阅读更多关于这个问题的信息here和here。

【讨论】：

感谢您的回答。在进一步调查中，我认为hideUrlBar 代码中存在错误。跳转是由hideUrlBar=true 时运行的代码触发的，但将其设置为false 会破坏正常的转换。我已经在我自己的答案中详细说明了。我不想用滚动条插件来解决这个问题
还需要注意的是，我只在初始页面加载时遇到此问题。我不是在谈论转换，我实际上也没有在转换时遇到这个问题 - 即使目标页面非常复杂

【解决方案2】：

此问题仅发生在初始页面加载时。查看源代码原来与这一行有关：

// window load event
// hide iOS browser chrome on load if hideUrlBar is true this is as fall back incase we were too early before
if ($.mobile.hideUrlBar)
{
    $window.load( $.mobile.silentScroll );
}

我只注释掉了$window.load 行，问题就消失了。

问题当然是$window.load 有很多视频/图像可能需要 1-2 秒。因此，如果用户同时滚动，您会感到痛苦的跳跃。

hideUrlBar 的这种行为与试图隐藏某些 iOS 特定工具栏有关，反正我也不在乎。所以我可以不用这个“回退”。

在mobileinit 中仅设置hideUrlBar=false 的问题在于，此变量在正常滚动期间在其他地方使用，这意味着窗口在转换后不会滚动到顶部。我认为这是一个错误。

最终修复

我决定了：

在我的 mobileinit 事件中，我设置了 hideUrlBar=false 以防止 $window.load 事件运行。

当页面加载后，我会重新启用它，以免破坏页面之间的转换（从底部的链接到另一个页面）。

    // mobile init
    $(document).on('mobileinit', function ()
    {
        $.mobile.hideUrlBar = false;
        $.mobile.defaultDialogTransition = "pop";
        $.mobile.defaultPageTransition = "none";
    });


    $(window).load(function ()
    {
        $.mobile.hideUrlBar = true;
    });

这似乎工作正常，但设置 hideUrlBar=false 会破坏其他滚动的事实很糟糕。至少我设法修复它而无需更改源。

杂项说明

我只在初始页面加载时遇到过这种“跳跃”问题。在转换期间这对我来说不是问题，因为上面的 $window.load 代码只执行一次，而不是在转换之后。
我还是关闭了转换。
我的应用程序具有完全响应能力，适用于移动设备和桌面设备。