檢測iframe何時獲得或失去焦點

檢測iframe獲取或失去焦點（即是否會收到鍵盤事件）的正確方法是什麼？以下是不FX4工作：檢測iframe何時獲得或失去焦點

var iframe = /* my iframe */; 
iframe.addEventListener("focus", function() { /* never gets called */ }, false);

來源

2011-03-28 CAFxX

請查看http://stackoverflow.com/questions/1926861/iframe -onblur-event – 2011-03-28 08:22:32

@Uw我無法控制iframe的內容（不同來源），並且該方法需要訪問iframe.contentDocument（不允許來自不同來源的文檔） – CAFxX 2011-03-28 08:36:22

原來它不是真的有可能。我不得不改變我的頁面的邏輯，以避免跟蹤iframe是否有焦點。

來源

2011-09-06 14:43:20 CAFxX

這是可能的。看到我的答案。 – Ryan 2012-10-19 17:10:54

如果您實現HTML5 sendMessage以在兩者之間進行通話，則給出的答案可能與交叉來源 – user3036342 2014-09-15 09:57:30

的解決方案是這樣的父頁面上注入一個JavaScript事件：

var script = document.createElement('script'); 
script.type = 'text/javascript'; 

script.innerHTML = 
"document.addEventListener('click', function()" + 
"{ if(document.getElementById('iframe')) {" + 
    // What you want 
"}});"; 

head.appendChild(script);

來源

2011-03-28 10:50:55 Sindar

正如我在我對Uw的回答中所寫的，我無法控制iframe的內容（不同來源）。這顯然意味着我無法從家長到孩子或從孩子到家長注入任何東西。 – CAFxX 2011-03-28 16:36:37

抱歉老兄，所以它會更復雜，在這個你可以繞過跨域問題夥計... 所有的解決方案存在，但它不是很乾淨... – Sindar 2011-03-28 16:47:00

您可以輪詢「document.activeElement」以確定它是否與iframe匹配。輪詢是不理想的，但它的工作原理：

function checkFocus() { 
    if(document.activeElement == document.getElementsByTagName("iframe")[0]) { 
    console.log('iframe has focus'); 
    } else { 
    console.log('iframe not focused'); 
    } 
} 

window.setInterval(checkFocus, 1000);

來源

2012-10-19 17:10:23 Ryan

不適用於我。我在帶有嵌入式YouTube視頻的網頁上使用鉻。點擊視頻不會改變document.activeElement，它始終指向主窗口的 – 2013-07-16 15:02:49

它在一個普通的iframe中工作;不確定嵌入的YouTube視頻的作用。當你點擊它時，它可能會使用javascript將焦點設置在其他地方。它甚至可能使用Flash。 – Ryan 2013-07-16 18:26:15

我以後用鉻測試過。事實上，我在Chrome x Chromium中獲得了不同的行爲。在Chrome中，它就像你說的那樣工作。在鉻中，它的工作方式如上所述。 – 2013-07-16 22:22:08

我知道這是舊的，但我也有同樣的問題。

我最終使用的代碼這個小PICE：

$(document).on('focusout', function(){ 
     setTimeout(function(){ 
     // using the 'setTimout' to let the event pass the run loop 
     if (document.activeElement instanceof HTMLIFrameElement) { 
      // Do your logic here.. 
     } 
    },0); 
});

來源

2015-03-08 21:40:59 EliorCohen

不適用於[youtube iframe]（https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations）。當我打電話給player.nextVideo（）時，iframe在不調用此方法的情況下偷走焦點 – woojoo666 2015-04-06 17:41:12

謝謝，這對我很有用。超時thingy是必不可少的，因爲我試圖隱藏下拉元素，當用戶點擊任何地方使用簡單的窗口點擊事件時，實際上不會觸發時，您將焦點更改爲iframe（如tinymce使用）。這種聚焦和超時確保我可以關閉彈出窗口，並確保在彈出窗口中單擊的內容也被觸發。 – Johncl 2016-10-10 09:06:35

偉大的解決方案。謝謝！ – GivP 2017-02-10 18:39:37

下面是代碼當一個iframe獲取或失去焦點

// This code can be used to verify Iframe gets focus/loses. 

     function CheckFocus(){ 

     if (document.activeElement.id == $(':focus').context.activeElement.id) { 
       // here do something 
      } 
    else{ 
     //do something 
    } 
}

來源

2017-09-20 13:04:57

你的意思是「這段代碼觸發了什麼」？沒有事件處理程序，這只是一個if ...因爲我無法想象這應該如何工作，請提供一個codepen或類似的表明它的工作原理。 – CAFxX 2017-09-20 21:07:25

這段代碼觸發的意思是：這段代碼可以在任何事件或函數內部使用來驗證元素是否聚焦或模糊。它很簡單。爲了更好的理解，我們修改了代碼。 – 2017-09-21 05:04:06

當然，謝謝，但這不是問題所在。該問題詢問如何檢測，即接收通知。您的解決方案不會發送通知，它需要輪詢狀態。 – CAFxX 2017-09-21 07:08:40

檢測這可能會實現

document.addEventListener('click', function(event) { 
    var frame= document.getElementById("yourFrameID"); 

    var isClickInsideFrame = frame.contains(event.target); 

    if (!isClickInsideFrame) { 
    //exec code 
    } 

});

來源

2017-10-19 08:52:14

不幸的是，它不適用於不同的域（CORS）。例如： https://jsfiddle.net/liadmagen/bxhwv9v1/1/ – 2017-12-22 17:17:03

檢測iframe何時獲得或失去焦點

回答

相關問題