Question

我有一个包含多个iframe的文档。 iframe都有textareas和textboxes。如何在整个文档中找出聚焦元素（带有光标的元素）？我需要一个方法（或属性）来搜索所有iframe并返回带有光标的textarea或textbox。

document.ActiveElement在控制台中为我提供了整个文档。

Answer 1

我已经为你做到了。使用此功能，您可以在网页或iframe中激活元素。该函数检查活动元素的位置并将其返回：

/**
* Return the active element in the main web or iframes
* @return HTMLElement
**/
function getActiveElement() {
    var focused = false;

    // Check if the active element is in the main web or no
    if( document.body === document.activeElement ||
        document.activeElement instanceof HTMLIFrameElement ){

        // Search in iframes
        $('iframe').each(function(){
            var element = this.contentWindow.document.activeElement;
            // If there is a active element
            if( element !== this.contentWindow.document.body ){
                focused = element;
                return false; // Stop searching
            }
        });

    }
    else focused = document.activeElement;

    return focused; // Return element
}

您可以看到一个jsfiddle示例：http://jsfiddle.net/tgrywLz7/5/

<强>已更新：

更好！使用新功能，您可以在具有多级iframe但没有jQuery的网页中获取有效元素！：

/**
* Retrieve active element of document and preserve iframe priority MULTILEVEL!
* @return HTMLElement
**/
var getActiveElement = function( document ){

     document = document || window.document;

     // Check if the active element is in the main web or iframe
     if( document.body === document.activeElement 
        || document.activeElement.tagName == 'IFRAME' ){
         // Get iframes
         var iframes = document.getElementsByTagName('iframe');
         for(var i = 0; i<iframes.length; i++ ){
             // Recall
             var focused = getActiveElement( iframes[i].contentWindow.document );
             if( focused !== false ){
                 return focused; // The focused
             }
         }
     }

    else return document.activeElement;

     return false;
};

请参阅操作：http://jsfiddle.net/tgrywLz7/9/

Answer 2

现在是2020年，这是Google检查其他文档上下文中的活动元素的最佳搜索结果之一。

更新它使其更加简单，并检查阴影根。：）

/**
  * Return the active element of a page, regardless of shadow root or iframe window.
  * @returns {HTMLElement}
  */
function getActiveElement(element = document.activeElement) {
  const shadowRoot = element.shadowRoot
  const contentDocument = element.contentDocument

  if (shadowRoot && shadowRoot.activeElement) {
    return getActiveElement(shadowRoot.activeElement)
  }

  if (contentDocument && contentDocument.activeElement) {
    return getActiveElement(contentDocument.activeElement)
  }

  return element
}

在包含许多iframe的文档中查找焦点元素

2 个答案: