1

有没有办法在 iFrame 中附加一个侦听器，当浏览器窗口获得焦点（单击选项卡或标题栏）时将调用该侦听器？这是测试代码：

测试.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>

测试1.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，mousemove 侦听器被调用，但焦点和模糊仅在 iFrame 被点击和关闭时被调用，而不是在浏览器窗口获得/失去焦点时被调用。我尝试将侦听器附加到 doc 并以相同的结果获胜。我正在 Chrome 和 Firefox 中进行测试。

4

2 回答 2

4

我真的不知道，jQuery 的焦点/模糊的魔力是什么，但我相信这种魔力有点问题。（或者这可能是我不知道的功能：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-10T03:04:57.490 回答
0

答案似乎在 jQuery 的实例中。在您的示例中，您使用iframe中的 jQuery 实例在top的元素上附加了一个事件处理程序。这只是一个猜测，但我会说“魔法”不会跨 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-26T14:47:23.813 回答