避免使用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>

这似乎是可行的，虽然有一点延迟，但这并不是很好，但到目前为止，这似乎是唯一有效的方法。

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

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

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

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

更新

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

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

忘了实际更新snippet...so，它现在添加了。

试试下面的片段。在“整页”中查看。你必须向下滚动到底部和右边，因为没有帮助它是不会滚动的。

​

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>

​