在许多iframe中查找文档中的焦点元素 [英] Find focused element in document with many iframes

问题描述

我有一个包含多个iframe的文档。内联框架都有textareas和文本框。我怎样才能找出整个文档中的焦点元素（光标在其中的元素）？我需要一个方法（或属性），将搜索所有的内联框架，并返回textarea或文本框中的光标。

document.ActiveElement给我

解决方案

我已经为您做好了准备。使用此功能，您可以获取网页或iframe中的活动元素。该函数检查活动元素的位置并返回它：

  / ** 
 *返回活动元素主要网页或内联框架
 * @return HTMLElement 
 ** / 
 function getActiveElement（）{
 var focused = false; 
 
 //检查活动元素是否在主网页中或者没有
 if（document.body === document.activeElement || $ b $ document.activeElement instanceof HTMLIFrameElement）{ 
 $ b $ //搜索iframe 
 $（'iframe'）。each（function（）{
 var element = this.contentWindow.document.activeElement; 
 / /如果存在活动元素
 if（element！== this.contentWindow.document.body）{
 focused = element; 
 return false; //停止搜索
} 
}）; 
 
} 
 else focused = document.activeElement; 
 
回报集中; //返回元素
} 
  

你可以看到一个jsfiddle的例子： http://jsfiddle.net/tgrywLz7/5/

更新：

更好！使用新的函数，您可以在具有多级iframe的网页中获取活动元素，而不需要 jquery ！

  / ** 
 *检索文档的活动元素并保留iframe优先级MULTILEVEL！ 
 * @return HTMLElement 
 ** / 
 var getActiveElement = function（document）{
 
 document = document || window.document; 
 
 //检查活动元素是否在主网页或iframe中
 if（document.body === document.activeElement 
 || document.activeElement.tagName == 'IFRAME'）{
 //获取iframes 
 var iframes = document.getElementsByTagName（'iframe'）; 
 for（var i = 0; i< iframes.length; i ++）{
 //回想
 var focused = getActiveElement（iframes [i] .contentWindow.document）; 
 if（focused！== false）{
 return focused; //所关注的
} 
} 
} 
 
 else return document.activeElement; 
 
返回false; 
}; 
  

见动作： http://jsfiddle.net/tgrywLz7/9/

I have a document with multiple iframes in it. The iframes all have textareas and textboxes. How can I find out what is the focused element (the element with the cursor in it) in the whole document? I need a method (or a property) which will search in all of the iframes and return the textarea or textbox with the cursor in it.

document.ActiveElement gives me the whole body of the document in console.

解决方案

I have made it for you. With this function you can get the element active in the web page or iframes. The function checks where is the active element and returns it:

/**
* 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
}

You can see a jsfiddle example working in: http://jsfiddle.net/tgrywLz7/5/

UPDATED:

Even better! With the new function you can get the active element in a webpage with multilevel iframes and without 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;
};

See in action: http://jsfiddle.net/tgrywLz7/9/

这篇关于在许多iframe中查找文档中的焦点元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！