防止页面跳转到 iframe答案

【问题标题】：Prevent page to jumping to iframe防止页面跳转到 iframe
【发布时间】：2016-08-14 23:56:49
【问题描述】：

我正在尝试通过 iframe 将 wetransfer 集成到网站中，但我在页面加载时遇到问题，它在页面的一半跳转，所以它专注于 iframe，而不是在顶部打开页面。

据我所知，wetransfer 网站上有一个脚本告诉它跳转到该部分，而不是从页面顶部开始。如何通过 wetransfer 或在 iframe 加载后让它忽略脚本以告诉它移回页面顶部？

使用 jquery 我尝试了 $('html').scrollTop(0);启动 iframe 后，还是不行。

在网站上，我让 jquery 计算用户屏幕的高度，然后将标题设置为该大小，并具有完整的背景和导航，并且 iframe 从其下方开始。因此，将位置设置为绝对位置或任何类似的位置都行不通。

我创建了一个非常简单的 jsfiddle 示例，只是为了展示页面如何在页面中途滚动打开。只有当 iframe 源是 wetransfer 而不是任何其他源时才会这样做。

https://jsfiddle.net/dbruning22/c0s6mhkv/6/

HTML

<header>
  Some Header information and navigation
</header>
<div class="main">
  <iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>

CSS

header { 
  background: green;
  height: 600px;
}

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

这对我有用：

1) 您最初通过将显示设置为无来隐藏 iframe：

<iframe id="bmap" src="xxx.xxxx.xxx" style="display:none;"  frameborder="0">

2) 页面加载后，使用 jquery 或 javascript 显示 iframe：

window.onload = function ()
{
    $("#bmap").show();
}

这对我来说跨浏览器都有效

【讨论】：

【解决方案2】：

您可以像这样在页面顶部放置一个锚点：

HTML

<header>
<a id="focus" href="#focus"></a>
  Some Header information and navigation
</header>

在页面加载时使用这个 JS：

document.getElementById("focus").focus();

【讨论】：

试过了，但没有任何反应。仍然跳到页面中间。
你能分享你网站的链接吗？
这里是网站的链接：goo.gl/UVkWph
我在 IE edge、firefox 45 和 chrome 49 上尝试过，但现在出现了问题。尝试按 CTRL+F5 刷新页面。
哈哈哈......真烦人。我昨天浪费了多少小时试图解决这个问题。检查了 Firefox 和 IE 并没有导致问题，但仍在 Chrome 中进行。尝试清除我的浏览器缓存并停止这样做。感谢您抽出宝贵时间提供帮助。

【解决方案3】：

这是一个完全禁用自动滚动的“hack”，只需将函数 window.scrollTo() 重新定义为无操作即可：

window.scrollTo = function () {};

【讨论】：

【解决方案4】：

由于经过多次测试，上述方法对我都不起作用，这是另一个技巧，因为现在很多网站都有一个“滚动到顶部”按钮，如果页面结构不能轻易修改（如 wordpress 主题... ):

  jQuery(".scroll-top-button").trigger("click");

只需强制单击该按钮...这确实是跨浏览器:-)（如果当然支持 jquery）....

【讨论】：