避免使用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问题：避免自动滚动页面，但上面的建议对我不起作用。

有人能给我指正确的方向吗？感谢

Answer 1

更新

OP通过使用scrollTo:找到了可接受的解决方案

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

这似乎是有效的，虽然有点延迟，所以不太好，但到目前为止，这是唯一有效的方法。

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

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

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

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

更新

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

• 加载页面时创建临时透明输入
• 当页面完全加载时，使用回调来删除输入

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

试试下面的这个片段。在"整页"中查看。你必须向下滚动到底部和右侧，因为没有帮助是无法滚动的。

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>