防止頁面跳轉到 iframe

Question

我正在嘗試通過 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;
}

Answer 1

這對我有用：

1) 您最初通過將顯示設置為無來隱藏 iframe：

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

2) 頁面加載完畢后，使用 jquery 或 javascript 顯示 iframe：

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

這在瀏覽器中對我有用

Answer 2

您可以在頁面頂部放置一個錨點，如下所示：

HTML

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

在頁面加載時使用這個 JS：

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

Answer 3

這是一個完全禁用自動滾動的“hack”，只需將函數window.scrollTo()重新定義為無操作：

window.scrollTo = function () {};

Answer 4

由於經過多次測試，上述方法都不適合我，這是另一個技巧，因為現在很多網站都有一個“滾動到頂部”按鈕，如果頁面結構無法輕松修改（例如 wordpress 主題...），則特別有用：

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

只是強行點擊那個按鈕......那真的是跨瀏覽器:-)（當然如果jquery支持）......