javascript - 如何将焦点移出 IFrame

标签 javascript dom iframe

我有一个带有一些按钮的 IFrame。当按钮被点击时,父 DOM 被操作(它们都在同一个域中,所以不用担心同源策略)。

由于用户单击了按钮,焦点转到了 IFrame。但是,我想将焦点移回父文档(主要是由于 this FireFox problem )。

我该怎么做?

编辑:我创建了一个 js-fiddle这表明了问题。如果在父表单元素上调用 focus() 似乎可以工作,但它通常不起作用。正如您从 js-fiddle 中看到的那样,我的父文档中没有表单元素。

最佳答案

如果要从iframe内部将焦点设置回外窗,聚焦外窗本身不太可能给用户任何视觉反馈,所以最好在外页面中聚焦一个已知的表单元素.

您可以按如下方式执行此操作:

outer.html

<html>
  <head>
    <title>Outer</title>
  </head>
  <body>
    <iframe id="iframe" src="inner.html">
    </iframe>
  </body>
</html>

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

关于javascript - 如何将焦点移出 IFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10502099/

相关文章:

JavaScript for `set(' pdf ppt tif tiff jpg jpeg'.split())`?

javascript - 使用 ajax 调用中的数据 knockout 更新可观察数组的每个元素的属性

javascript - 获取动态创建元素的整个 HTML

javascript - jQuery 自动完成并不总是适用于元素

javascript - 为什么事件冒泡在分离的 DOM 元素中不起作用?

drupal - 从 Drupal 网站创建 iframe

javascript - 另一个 iframe 中的 iframe 的 Onload 函数

javascript - 如何浏览包含多个 html 源的网页?

javascript - jquery元素无法滑过iframe

javascript - 无法使用QtWebkit通过javascript访问Qt对象方法