避免使用 iframe 视频自动跳转到页面底部

Question

我在这样的页面上显示了一个视频

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{{skin url="video/hande.mp4"}}"></iframe>
</div>

但是在平板电脑/手机上加载页面时，页面会自动跳转到视频所在的底部。我试着添加这样的东西

<iframe style="display: none;" onload="this.style.display='block';" href="..."></iframe>

根据这个问题iframe on the page bottom: avoid automatic scroll of the page，但那里的建议对我不起作用。

任何人都可以指出我正确的方向吗？谢谢

Answer 1

更新

OP 通过利用 scrollTo:

找到了可接受的解决方案

<script type="text/javascript">
    // <![CDATA[ window.onload = function(){ window.scrollTo(0,0); }// ]]>
</script>

which seems to work, there's a bit of a delay though so its not great but so far its the only thing that seems to have worked.

所以要添加到 OP 的解决方案中，请尝试：

<script>
    // <![CDATA[ document.addEventListener("DOMContentLoaded", function(){ window.scrollTo(0,0); }, false )// ]]>
</script>

使用window.onload意味着您的函数将在其他所有内容加载后调用； DOM、图片、脚本等

使用 DOMContentLoaded 意味着您的函数将在 DOM 加载后调用（这意味着在任何 iframe 加载后，通常是 DOM 内容中最慢的部分） .它不等待的是脚本，因此请确保将 YouTube 脚本放在这一行之前。当然也有例外见 ARTICLE

更新

似乎 focus 事件可能是罪魁祸首，因此您可以做的是让浏览器专注于其他事情。

在页面加载时创建临时透明输入。
页面完全加载后，使用回调删除输入。

忘记实际更新片段...所以现在添加了。

试试下面的这个片段。在 'Full Page' 中查看。您必须向下滚动到底部和右侧，因为它不会在没有帮助的情况下滚动。

document.addEventListener('DOMContentLoaded', init, false);

window.load = function() {
  var fpt = document.querySelector('.focalPoint');
  fpt.parentNode.removeChild(fpt);
}

function init() {
  var fpt = document.createElement('input');
  document.body.appendChild(fpt);
  fpt.classList.add('focalPoint');
  if (fpt != document.activeElement) {
    fpt.focus();
  }
}

.box {
  width: 50vw;
  /* Arbitrary */
}
.vidWrap {
  position: relative;
  /* Anchor the iframe's parent */
  padding-bottom: 56%;
  /* This is for AR 16:9 (ie. wide screen) videos */
  padding-top: 20px;
  /* Offset to padding-bottom */
  height: 0;
  /* Makes a tight 'seal' */
  overflow-y: hidden;
  /* Ensures that edges aren't breached */
  overflow-x: hidden;
  /* As above */
  -webkit-overflow-scrolling: touch;
  /* For iOS7 ... not so sure about iOS8 or iOS9 */
  bottom: -50vw;
  /* Arbitrary. */
  left: 50vw;
  /* Arbitrary */
}
.vid {
  overflow-x: hidden;
  /* See above */
  overflow-y: hidden;
  /* As above */
  height: 100%;
  /* stretched to the edge of parent */
  width: 100%;
  /* As above */
  position: absolute;
  /* Allows control within the parent */
  /* These coords will stretch the iframe seemlessly to parent's edges */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.focalPoint {
  visibility: hidden;
  opacity: 0;
  line-height: 0;
  font-size: 0;
  border: 0;
  outline: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

<section class="box">
  <div class="vidWrap">
    <iframe id="vid1" class="vid" src="http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4" frameborder="0" scrolling="no" height="100%" width="100%" allowfullscreen></iframe>
  </div>
</section>

避免使用 iframe 视频自动跳转到页面底部

avoid automatic jump to bottom on page with iframe video

iframe

video-embedding