使用jQuery將監聽器附加到iframe中的頂部窗口焦點事件

有沒有辦法在iFrame內部附加一個監聽器，當瀏覽器窗口獲得焦點時會調用監聽器（單擊標籤或標題欄）？下面是測試代碼：使用jQuery將監聽器附加到iframe中的頂部窗口焦點事件

的test.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><body><iframe src="test1.html"></iframe></body></html>

test1.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head><body><script type="text/javascript"> 
    var doc = $(window.top.document); 
    var win = $(window.top); 
    doc.ready(function(){ 
      win.focus(function() { console.log('Focus'); }); 
      win.blur(function() { console.log('Blur'); }); 
      doc.mousemove(function() { console.log('Move'); }); 
    }); 
</script></body></html>

擊中的test.html，鼠標移動監聽器被調用，但focus和blur只有被調用時的iFrame被點擊打開和關閉，但當瀏覽器窗口失去焦點時不會被點擊。我試着將聽衆附加到doc上，並以相同的結果獲勝。我正在Chrome和Firefox中測試。

來源

2012-09-07 Oleg Barshay

我試圖讓調用的事件處理，當整個窗口獲得焦點 –

我真的不知道，jQuery焦點/模糊的神奇之處在於什麼，但我相信魔法有點bug。（或者它可能是我不知道的一個特性：o）

如果你沒有使用jQuery方法，它可以正常工作。

var doc = window.top.document; 
var win = window.top; 
win.onfocus = function() { console.log('Focus'); }; 
win.onblur = function() { console.log('Blur'); }; 
doc.onmousemove = function() { console.log('Move'); };

來源

2012-09-10 03:04:57

謝謝，好像這致力於解決我的問題。我還會補充說，要在IE中實現這個功能，您必須這樣做： if（$。browser.msie）{0} {0} {0} {window.top.document.onfocusin = function（）{console.log（'Focus'）; };其他{ window.top.onfocus = function（）{console.log（'Focus'）; }; } etc –

hi Oleg and Marc！我需要相同的，但不能使用jQuery。你有沒有發現它爲什麼不起作用？我們可以看看jQuery的代碼來找出答案嗎？謝謝 – 2016-04-27 18:45:57

答案似乎是在jQuery的實例。在你的例子中，你使用iframe中的jQuery實例，在頂部的元素上附加事件處理程序。這只是一個猜測，但我會說'魔術'不會跨越jQuery的實例。

試試這個：

var doc = window.top.$(window.top.document); 
var win = window.top.$(window.top); 
doc.ready(function(){ 
     win.focus(function() { console.log('Focus'); }); 
     win.blur(function() { console.log('Blur'); }); 
     doc.mousemove(function() { console.log('Move'); }); 
});

實現閃閃發光來自：

https://leapinggorilla.com/Blog/Read/4/passing-messages-to-iframes-with-jquery

來源

2016-10-26 14:47:23 kim3er

使用jQuery將監聽器附加到iframe中的頂部窗口焦點事件

回答

相關問題