聚焦在 iframe 之外答案

【问题标题】：Focus outside iframe聚焦在 iframe 之外
【发布时间】：2016-09-29 15:44:07
【问题描述】：

我有一个 iframe，它有自己的应用程序。我希望能够将目标聚焦在 iframe 之外，但到目前为止它还没有识别它。在页面本身上，它可以工作，但是一旦进入 iframe（文本区域），我想从 iframe 中退出。该函数在 iframe 内工作（至少 console.log 工作）但不是实际的焦点事件。我尝试先关注文档，然后让它运行操作，但它没有关注 iframe 之外。我必须在应用程序中拥有该功能才能识别它。

https://jsfiddle.net/5ufc4koc/

<div class="field">
    <a href="#">Testing</a>
    <iframe>
        <div>Text text text
        </div>
    </iframe>
</div>

App.outside = function () {
    $(document).focus();
    $(document).on('keydown', function (e) {
        if (e.which === 113) {
            $('.field:first a').focus();
            console.log('testing');
        }
    });
};

【问题讨论】：

$(document) 无法聚焦，但您可以阅读我将标记的副本
Is there any way in JavaScript to focus the document (content area)?的可能重复
不太清楚您要针对keydown 定位哪个文档。 iframe 有自己的文档，您在 iframe 上执行的任何操作都不会在父文档中触发
是的，我想回到父文档来触发焦点
使用 $('#iframeId').contents() 访问 iframe 内部 ... 加载后并假设 iframe 在同一个域中

标签： jquery css iframe

【解决方案1】：

在 iframe 中放置另一个 jquery/java 脚本——关注“parent.window.document”。

$(document).ready(function(){

   var form = parent.window.document.querySelector('.field');
var toBeFocusedOn = parent.window.document.getElementById("#whateverIdOnMainPage");
$( document ).on( 'keydown', function ( e ) {
  if ( e.keyCode === 133 ) { // key code  '27 is ESC'
    
    toBeFocusedOn.focus();     
  }
});
		});

【讨论】：