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

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

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

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

谢谢

---

更新：是的，iframe正在从另一个源（不是同一个域）加载。

假设您在同一个域中有iframe：

您可以这样做：

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

---

如果假定iframe不是从同一域提供的。。您可以将任何其他可聚焦的dom元素放置在页脚中iframe之后，并将

autofocus

设置为

true

。如果不起作用，请在父级主窗口中尝试以下操作：

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

还是坐飞机

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，它将被加载并显示。没有故障，而且效率很高。

现在已经是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>

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

对于Bootstrap3，您可以使用visible xs和hidden xs来隐藏或显示代码片段

对于bootstrap 4，您将使用“d-block d-sm-none”来显示仅限移动的代码；和“d-none d-sm-block”隐藏仅限移动的代码

页脚上需要的脚本：

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

 <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之前加载，否则它将无法工作

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

虽然使用一些js/ajax/jquery甚至php的解决方案可能会更好，但这段简单的代码速度很快，适用于支持引导功能的网站。根据需要修改

---

我希望这有帮助

我们可以使用

sandbox

属性来阻止自动触发的功能（例如自动播放视频或自动聚焦表单控件）

---

您能为iframe共享正确的URL吗？听起来像是跨域iframe，似乎这是一个带有属性

自动对焦

setBODY的输入，没有相关的onload事件，我猜您的意思是

窗口

对象