2

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

<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 开始：避免自动滚动页面，但那里的建议对我不起作用。

谁能指出我正确的方向？谢谢

4

1 回答 1

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>

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

UsingDOMContentLoaded意味着你的函数将在 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>

于 2015-11-07T18:31:56.993 回答