Question

我有一个像这样嵌入的iframe：

json_last_error()

每次页面加载焦点都会从页面顶部丢失并切换到页脚中的iframe。我想知道如何从中移除焦点并使页面“正常”加载？

谢谢！

更新：是的，从其他来源（不是同一个域）加载iframe

Answer 1

如果假设iframe未在同一个域中提供..您可以在页脚中将if autofocus设置为true之后放置任何其他可聚焦dom元素。如果这不起作用，请在父主窗口中尝试以下操作：

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

OR by 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>

Check this for more info

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>

对于 bootstrap 3 ，您可以使用 visible-xs 和 hidden-xs 隐藏或显示代码段。

对于 bootstrap 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设置。必须在 bootstrap.js之前加载 popper.js ，否则它将无法正常工作。

在达到此目的之前，我尝试了所有可能的方法。遗憾的是，其他成员和论坛发布的JS，jQuery和reCaptcha黑客均无效。页面加载将始终默认为表单。

虽然使用js / ajax / jquery甚至php可能会更好，但是此简单的代码很快，并且可以在启用了引导程序的网站上正常工作。根据需要进行修改。

我希望这对您有帮助

在页面加载时从Iframe中删除焦点

5 个答案: