在页面加载时从Iframe移除焦点

Remove focus from Iframe on page load

本文关键字：Iframe 焦点 加载      更新时间：2023-09-26

我有一个像这样嵌入的Iframe:

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

每次页面加载时，焦点从页面顶部丢失并切换到页脚中的这个Iframe。我想知道我怎么能从这移除焦点，使页面加载"正常"?

谢谢!

更新:是的，iframe正在从另一个源(不相同的域)加载

如果假设iframe不是来自同一域。您可以在页脚的iframe之后放置任何其他可聚焦的dom元素，并将autofocus设置为true。如果这不起作用，请在父主窗口中尝试以下操作:

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

OR使用香草JS

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

我们可以做的事情太多了，例如在窗口加载时，我们使用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，它将被加载并显示。无故障，高效。

我们可以使用sandbox属性来阻止自动触发的功能(例如自动播放视频或自动对焦窗体控件)。

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

查看更多信息

假设iframe位于同一域中:

你可以这样做:

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

已经是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 -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版本将取决于你的bootstrap 3或4设置。popper.js必须在 bootstrap.js之前加载，否则会失败。

在到达这个hack之前，我尝试了所有可能的事情。遗憾的是，其他成员和论坛发布的JS, jQuery和reCaptcha攻击都不起作用。页面加载总是默认为表单。

虽然解决方案可以更好的一些js/ajax/jquery或甚至php，这个简单的代码是快速和工作良好的启动网站。根据需要修改

希望对大家有所帮助

相关文章：