问题将焦点设置到 chrome 中包含 iframe 的页面答案

【问题标题】：Issue setting focus to page containing iframe in chrome问题将焦点设置到 chrome 中包含 iframe 的页面
【发布时间】：2017-08-23 17:27:22
【问题描述】：

我有一个页面，其中包含页面中心的 iframe 及其跨域 iframe。加载页面时，页面的焦点会转移到包含 iframe 的页面中心。我试图确保焦点转移到页面顶部。以下解决方案仅适用于 IE，但不适用于 chrome/Firefox。

输入控件“foo”出现在页面顶部。任何想法？为什么它不起作用我认为 chrome 的模糊属性有问题。

<iframe width="1200" height="380" id="usageReport" src="https://google.com" frameborder="0" allowfullscreen="true"></iframe>
<script language="javascript" type="text/javascript">
window.onload = function() {            
         $('#foo').on('blur',function () { 
         var blurEl = $(this); 
         setTimeout(function() {
         blurEl.focus()
      }, 10);
      });

};
</script>

【问题讨论】：

标签： jquery html iframe

【解决方案1】：

我认为您是在说当页面加载时，您希望专注于输入字段。

好吧，有一件事情可能会奏效，我不确定 iframe 或发生了什么，只需将 HTML5 autofocus 属性添加到输入中即可。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus

不过，对于您的代码，这部分 $('#foo').on('blur',function () { 是一个侦听器。所以你的代码是这样说的，当用户从输入字段模糊时，等待 10 毫秒，然后专注于输入字段。我不确定这是否是您想要的，因为只要用户离开该领域，它就会尝试再次获得焦点。你只是想要：

$(document).ready(function() {            
    setTimeout(function() {
        $('#foo').focus();
   }, 10);
});

我的代码只是说，当页面加载时，在 10 毫秒后关注输入。但实际上，自动对焦属性会更好。这仍然可能不起作用，因为 iframe 也可能在加载后捕获它，因此您确实需要在 iframe 加载后触发它。

这里有解释：Capture iframe load complete event

【讨论】：