防止页面跳转到 iframe

Posted 2023-03-06

【中文标题】防止页面跳转到 iframe

【英文标题】：Prevent page to jumping to 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/"   frameborder="0"></iframe>
</div>

CSS

header  
  background: green;
  height: 600px;

【参考方案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）....