Javascript 如何在IFrame之外更改焦点_Javascript_Dom_Iframe

Javascript 如何在IFrame之外更改焦点

javascript dom iframe

Javascript 如何在IFrame之外更改焦点,javascript,dom,iframe,Javascript,Dom,Iframe,我有一个IFrame，里面有一些按钮。单击按钮时，父DOM将被操纵（它都在同一个域中，因此不必担心同源策略）由于用户单击了一个按钮，所以焦点转到IFrame。但是，我想将焦点移回父文档（主要是由于）我该怎么做编辑：我创建了一个显示问题的。如果在父窗体元素上调用它，focus（）。从js fiddle中可以看到，我的父文档中没有表单元素。在页面上创建一个元素，并在焦点设置为IFrame后的某个点调用它： document.getElementById("myElementId").focus

我有一个IFrame，里面有一些按钮。单击按钮时，父DOM将被操纵（它都在同一个域中，因此不必担心同源策略）

由于用户单击了一个按钮，所以焦点转到IFrame。但是，我想将焦点移回父文档（主要是由于）

我该怎么做

编辑：我创建了一个显示问题的。如果在父窗体元素上调用它，

focus（）。从js fiddle中可以看到，我的父文档中没有表单元素。
在页面上创建一个元素，并在焦点设置为IFrame后的某个点调用它：
document.getElementById("myElementId").focus(); 

这会将焦点设置回主体和IFrame之外。
如果要从IFrame内部将焦点设置回外部窗口，则聚焦外部窗口本身不太可能向用户提供任何视觉反馈，因此最好在外部页面中聚焦已知的表单元素
您可以按如下方式执行此操作：
outer.html

外面的

inner.html

内部的
//当我们点击内部按钮时。。。
document.getElementById（'innerButton'）。addEventListener（'click'，function（）{
/*
*在这里做你需要做的一切
*/
//关注家长
parent.focus（）；
});
是否可能重复？您是否尝试过使用top
对父文档进行寻址？@rt2800它很接近，但不是重复的。在这个问题上，他试图把注意力集中在输入元素上。我试着从总体上解决这个问题，但似乎输入元素案例的答案在总体上不起作用。@daniel0mullins你的意思是什么？top.focus（）？@daniel0mullins document.getElementById获取正确的dom元素。通过top访问it将如何改变事情？它与dom元素相同。使用focus（）不起作用。我已经编辑了我的问题以链接到显示问题的js小提琴。但是我的页面没有任何表单元素：/我很确定，您可以跳过对getElementById
的调用，而是调用parent.document.focus（）
。然而，据我所知，一些浏览器（特别是Firefox）根据用户设置对在窗口上调用focus（）施加规则。Chrome和Firefox都抱怨document.focus不是一个函数：（对不起，我弄错了-只要parent.focus（）
就足够了。这是窗口的一种方法，而不是文档的方法。请更新答案以匹配：）啊，这很有效。不幸的是，关于FF你是对的。我发现了一个bug
<html>
  <head>
    <title>Outer</title>
  </head>
  <body>
    <iframe id="iframe" src="inner.html">
    </iframe>
  </body>
</html>

<html>
  <head>
    <title>Inner</title>
  </head>
  <body>
    <form id="innerForm">
      <input type="button" id="innerButton" value="Inner button" />
    </form>
  </body>
  <script type="text/javascript">
    // When we click the inner button...
    document.getElementById('innerButton').addEventListener('click', function() {
      /*
       * Do whatever you need to do here
       */

      // Focus the parent
      parent.focus();
    });
  </script>
</html>