避免使用iframe视频自动跳转到页面底部 [英] avoid automatic jump to bottom on page with iframe video

问题描述

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

I have a video showing on a page like this

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

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

but when loading the page on tablet / mobile the page automatically jumps to the bottom where the video is. I tried adding something like this

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

此问题后面的 iframe：避免自动滚动页面但是那里的建议对我不起作用。

following from this question iframe on the page bottom: avoid automatic scroll of the page but the suggestions on there don't work for me.

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

Can anyone point me in the right direction? Thank you

推荐答案

更新

OP通过利用 scrollTo 找到了一个可接受的解决方案：

The OP has found an acceptable solution by utilizing 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的解决方案，请尝试：

So to add to OP's solution, try:

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

使用 window.onload 表示你的功能将在其他所有东西加载后调用; DOM，图像，脚本等

Using window.onload means your function will be called after everything else has loaded; DOM, images, script, etc.

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

Using DOMContentLoaded means your function will be called after the DOM has loaded (which means after any iframes have loaded, which is usually the slowest part of the DOM content). What it doesn't wait for is script, so make sure you place the YouTube script before this line. There are exceptions of course see ARTICLE

更新

似乎焦点事件可能是罪魁祸首所以你能做的就是让浏览器专注于其他事情。

It seems that the focus event could be the culprit so what you can do is offer the browser to focus on something else.

• 在页面加载时创建临时透明输入。


• 当页面完全加载时，使用回调来删除输入。

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

Forgot to actually update the snippet...so it's added now.

请尝试以下此代码段。在完整页面中查看。你必须向下滚动到底部和右边，因为它不会在没有帮助的情况下滚动。

Try this snippet below. View in 'Full Page'. You have to scroll down to the bottom and to your right, because it ain't gonna scroll without help.

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视频自动跳转到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！