Можно ли обнаружить, когда мышь находится над вкладкой браузера?

Question

Мне была назначена задача создать скрипт, который будет генерировать всплывающее окно, когда курсор мыши перейдет на текущую открытую вкладку браузера.

Что-то вроде этой демонстрации: http://demo.exitmonitor.com/, но здесь всплывающее окно появляется всегда, когда мышь покидает верхнюю часть веб-страницы.

Мне нужно сгенерировать это окно точно, когда мышь находится поверх текущей активной вкладки браузера.

Можно ли это сделать с помощью javascript?

Answer 1

Используйте MouseEvent.clientX и MouseEvent.clientY, чтобы отслеживать, где мышь находится на документе, а затем поместить всплывающее окно там с использованием absolute позиционирования:

//The popup: 
 
var span = document.createElement("span"); 
 
span.style.position = "absolute"; 
 
span.textContent = "I'm a popup!"; 
 
//When the page loads, the popup will be in the top-left corner 
 
//because we can't know where the mouse is on the page load. 
 
document.body.insertBefore(span, document.body.firstChild); 
 

 
//The event: 
 
document.addEventListener("mousemove", function(e) { 
 
    //Position the span according to its dimensions and where the mouse is. 
 
    span.style.marginLeft = e.clientX-span.clientWidth/2+"px"; 
 
    span.style.marginTop = e.clientY-span.clientHeight/2+"px"; 
 
});

Answer 2

я полагаю на «вкладке» вы означаете площадь, выделенная красным цветом:

Во всех современных браузерах веб-сайт не может получить доступ к чему-либо из его window, за исключением API, явно предоставленных ему.
Таким образом, вы не можете даже получить доступ к панели вкладок только с помощью JavaScript.

Независимо от того, есть ли способ доступа к панели вкладок, зависит от браузера, но для него (безусловно) потребуется аддон браузера.

В Chrome, например, это был not at all possible back in 2010, и похоже, что там ничего не изменилось.

В Firefox, однако, аддон действительно может это сделать.
Предполагая, что вы знаете, как прикрепить сценарий к browser.xul, я уезжаю из install.rdf, chrome.manifest и overlay.xul, так вот только соответствующий JavaScript:

(function() 
{ 
    // Wait for the browser to settle 
    top.addEventListener('load', function load(event) 
    { 
     // It only needs to do that once 
     top.removeEventListener('load', load); 
     // Get notified about every page that loads 
     top.gBrowser.addEventListener('DOMContentLoaded', function(event) 
     { 
      // Get the current tab 
      var tab = top.gBrowser.mCurrentTab; 
      // Check if we already annoyified it 
      if(tab.annoyingOrange === undefined) 
      { 
       // If not, let's do that! 
       tab.annoyingOrange = 'Plumpkin'; 
       // Add a mouseover event to it 
       top.gBrowser.mCurrentTab.addEventListener('mouseover', function(ev) 
       { 
        // Since we do that to all tabs, we need to check here if we're still the selected tab 
        if(ev.target == top.gBrowser.mCurrentTab) 
        { 
         // And now we can get onto everybody's nerves! 
         alert('Hey apple!!!'); 
        } 
       }); 
      } 
     }); 
    }); 
})(); 

Протестировано с Firefox 37.0.1 на Windows.

[Download .xpi] (Protip: Распакуйте для источника)

Но если ваш браузер не поддерживает его, вы не повезло, и нет ничего, что вы можете сделать!

---

Во всяком случае, это очень плохо сделать, и это раздражает людей нет конца!
Это должно быть никогда, никогда не должно быть в производственной или бета-среде!

Answer 3

Я считаю, что вам нужно MouseLeave событие:

<script> 
     function addEvent(obj, evt, fn) { 
      if (obj.addEventListener) { 
       obj.addEventListener(evt, fn, false); 
      } 
      else if (obj.attachEvent) { 
       obj.attachEvent("on" + evt, fn); 
      } 
     } 
     addEvent(window, "load", function (e) { 
      addEvent(document, "mouseleave", function (e) { 
       e = e ? e : window.event; 
       var from = e.relatedTarget || e.toElement; 
       if (!from || from.nodeName == "HTML") { 

        //.... do_this 
       } 
      }); 
     }); 
    </script>