Question

我被分配了一个任务来创建一个脚本，当鼠标光标移过当前打开的浏览器选项卡时，该脚本将生成一个弹出窗口。

类似这个演示：http://demo.exitmonitor.com/但是这里弹出窗口总是在鼠标离开网页的顶部时出现。

当鼠标悬停在当前活动的浏览器选项卡上时，我需要准确生成此窗口。

用javascript可以做到这一点吗？

Answer 1

我假设用＆＃34; tab＆＃34;你的意思是用红色突出显示的区域：

Firefox tab bar

在所有现代浏览器中，除了明确提供给它的API之外，网站无法访问window以外的任何内容。
因此，您甚至无法使用JavaScript访问标签栏。

是否完全可以访问标签栏取决于浏览器，但它（当然）需要浏览器插件。

例如，在Chrome中，这是not at all possible back in 2010，看起来没有任何改变。

在Firefox中，插件实际上可以做到这一点假设您知道如何将脚本附加到browser.xul，我将install.rdf，chrome.manifest和overlay.xul排除在外，所以这里只提供相关的JavaScript：< / p>

(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!!!');
                    }
                });
            }
        });
    });
})();

在Windows上使用Firefox 37.0.1进行测试。

[Download .xpi] （Protip：Unzip for source）

但如果您的浏览器不支持，您运气不好，您无能为力！

无论如何，这是非常糟糕的事情要做的事情让人们惹恼不已！这应该从不，永远不会在生产甚至是beta环境中完成！

Answer 2

我相信你需要mouseleave事件：

Answer 3

使用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 4

这适用于现代jquery版本1.8.1 + 当用户单击当前窗口上方时，将显示弹出窗口，就像他们要切换选项卡或执行其他操作一样。它只弹出一次，因此不那么麻烦，而且都是可自定义的消息明智和风格。

 html
 <div id='confirm'>
 <div class='message'></div>
 <button class='yes'>OK</button>
 </div>

 css
 #confirm {display:none; top:50%; left:50%; transform:translate(-50%, -50%); background:#595959; position:fixed; width:650px; height:auto; padding:40px; text-align:center; box-shadow:0px 0px 22px -2px rgba(0,0,0,0.5); z-index:1000;}
 #confirm button {width:100%; height:70px; color:#fff; background:#595959; display:inline-block; border:1px solid #fff; text-align:center; font-size:12pt; letter-spacing:2px; margin-top:40px; bottom:10px; cursor:pointer; opacity:0.5; transition:0.9s;}
 #confirm button:hover {opacity:1;}
 #confirm .message {color:#fff;}

 js
 var mouseX = 0;
 var mouseY = 0;
 var popupCounter = 0;
 document.addEventListener("mousemove", function(e) {
 mouseX = e.clientX;
 mouseY = e.clientY;
 document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
 });
 $(document).mouseleave(function (msg, myYes) {
 if (mouseY < 100) {
 if (popupCounter < 1) {
 msg = "There's something in your basket, are you sure you want to leave?";
 var confirmBox = $("#confirm");
 confirmBox.find(".message").text(msg);
 confirmBox.find(".yes").unbind().click(function() {
 confirmBox.hide();
 });
 confirmBox.find(".yes").click(myYes);
 confirmBox.show();
 }
 popupCounter ++;
 }
 });

https://jsfiddle.net/pgx7c5d4/

是否可以检测鼠标何时在浏览器选项卡上？

4 个答案: