Question

我的页面中心有一个包含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>

Answer 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

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

1 个答案: