在頁面加載時從 iframe 中移除焦點

Question

我有一個像這樣嵌入的 iframe：

<iframe id="foo" src="http://www.something.com" style="width: 90%; height: 300px"></iframe>

每次頁面加載焦點都會從頁面頂部丟失並切換到頁腳中的這個 Iframe。我想知道如何從中刪除焦點並使頁面“正常”加載？

謝謝！

更新：是的，iframe 是從另一個來源（不是同一個域）加載的

Answer 1

如果假設 iframe 不是來自同一域的服務..您可以在頁腳中的 iframe 之后放置任何其他可聚焦的 dom 元素，並將autofocus設置為true 。 如果這不起作用，請在父主窗口中嘗試以下操作：

$(window).on('load', function() {
    setTimeout(function(){$("body").focus()}, 100);
};

或者通過 vanilla JS

window.onload = function() {
    document.getElementById("some-focusable-element-from-parent-window").focus();
};

Answer 2

好吧，我們可以做的事情太多了，例如在窗口加載時，我們使用scrollTop函數滾動到頂部，...等但是使用這些方法，當窗口完全關閉時，我們會移開焦點並移回頂部加載，它會出現故障並且沒有很好的效果。 經過一段時間的思考和經驗，我得出以下結論：

當 dom 准備好時，我們使用 display:none 刪除 iframe。 接下來，當窗口完全加載時，我們將其帶回來。 為了有效地做到這一點，我們編寫了一個這樣的樣式類：

    .display_none{
         display:none;
     }

當文檔准備好時，我們將把這個類添加到我們的 iframe 中，並在窗口完全加載時刪除這個類。 有代碼：

$(document).ready(function(){
    $("#myFrame").addClass("display_none");
    $(window).load(function(){
        $("#myFrame").removeClass("display_none");
    });
});

現在有一種情況，這是行不通的！ 如果 iframe 是用另一個腳本創建並添加的，那么可能會加載 dom 但不會加載 iframe 元素本身（因為腳本可能還沒有創建它）！ 這就是我的情況。

解決方案：將 iframe 放入一個容器中，比如說一個div容器，並將上述方法應用於此容器。 一切都應該工作鎳！ 在 dom 加載時，div 是隱藏的，接下來當窗口完全加載時，它會恢復它！ 你會得到你的 iframe，它將被加載並顯示出來。 沒有故障，高效。

Answer 3

我們可以使用sandbox屬性來屏蔽自動觸發的功能（例如自動播放視頻或自動聚焦表單控件）。

<iframe src="https://muthukumaran-m.github.io/" sandbox></iframe>

檢查這個以獲取更多信息

Answer 4

假設您在同一個域中有 iframe：

你可以這樣做 ：

$("#foo").on('load', function() {
    $("body",parent.document).focus()
};

Answer 5

已經是 2019 年了，我在我的一些移動網站上一直遇到同樣的問題。 焦點一直被頁腳附近的聯系表單竊取。

我匆忙的方法可能不是最優雅的方法，但是通過修改您的 iframe 表單以隱藏在移動設備上，使用展開/折疊按鈕使其按需可見，您將阻止這種跳轉發生。

簡化代碼：

 <div class="d-block d-sm-none visible-xs"><!-- show only on mobile devices -->

   <a class="btn" data-toggle="collapse" href="#blockToControlID" role="button" 
    aria-expanded="false" aria-controls="blockToControlID">
    Expand/Collapse iframe Block
   </a>

   <div class="collapse" id="blockToControlID">
     <div class="card card-body">
       <iframe src="path-to-form"></iframe>
     </div>
   <div>

 </div>

 <div class="d-none d-sm-block hidden-xs"><!-- hide on mobile devices -->
   <iframe src="path-to-form"></iframe>
 </div>

對於引導程序 3，您將使用visible-xs和hidden-xs來隱藏或顯示代碼片段。

對於引導程序 4，您將使用“d-block d-sm-none”來顯示僅限移動設備的代碼； 和“d-none d-sm-block”隱藏移動專用代碼。

頁腳所需的腳本：

 <script src="js/jquery/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
 <script src="js/bootstrap/bootstrap.bundle.min.js"></script>

jQuery 版本將取決於您的引導程序 3 或 4 設置。 popper.js必須在bootstrap.js之前加載，否則將無法工作。

在達到這個 hack 之前，我嘗試了所有可能的方法。 遺憾的是，其他成員和論壇發布的 JS、jQuery 和 reCaptcha hack 都沒有奏效。 頁面加載將始終默認為表單。

雖然使用一些 js/ajax/jquery 甚至 php 的解決方案可能會更好，但這個簡單的代碼很快，並且適用於支持引導程序的網站。 根據需要進行修改。

我希望這有幫助