Making a window pop under in chrome

Question

I have a button that needs to open a new window as a popup (under the parent page). In IE/Firefox, it works fine, but in chrome the popup appears over (on top of) the parent window.

Please suggest a fix.

use case/eg: Well, for eg if you see kayak.com or any travel website, you have the ability to search on other websites too..I want to do something similar so need the pop under...

Code: I am using a window.open(.......).blur(), but for some reason it isnt working in chrome.

Solution 1

I take back my comment, is possible.

The following worked for me. (tested latest production chrome)

var url = "yourURL.html";
window.open(url, "s", "width= 640, height= 480, left=0, top=0, resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no").blur();
window.focus();

Like all things, if you annoy your visitors you will have less visitors.

Solution 2

function makePopunder(pUrl) {
    var _parent = (top != self && typeof (top["document"]["location"].toString()) === "string") ? top : self;
    var mypopunder = null;
    var pName = (Math["floor"]((Math["random"]() * 1000) + 1));
    var pWidth = window["innerWidth"];
    var pHeight = window["innerHeight"];
    var pPosX = window["screenX"];
    var pPosY = window["screenY"];
    var pWait = 3600;
    pWait = (pWait * 1000);
    var pCap = 50000;
    var todayPops = 0;
    var cookie = "_.mypopunder";
    var browser = function () {
        var n = navigator["userAgent"]["toLowerCase"]();
        var b = {
            webkit: /webkit/ ["test"](n),
            mozilla: (/mozilla/ ["test"](n)) && (!/(compatible|webkit)/ ["test"](n)),
            chrome: /chrome/ ["test"](n),
            msie: (/msie/ ["test"](n)) && (!/opera/ ["test"](n)),
            firefox: /firefox/ ["test"](n),
            safari: (/safari/ ["test"](n) && !(/chrome/ ["test"](n))),
            opera: /opera/ ["test"](n)
        };
        b["version"] = (b["safari"]) ? (n["match"](/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n["match"](/.+(?:ox|me|ra|ie)[\/: ]([\d.]+)/) || [])[1];
        return b;
    }();

    function isCapped() {
        try {
            todayPops = Math["floor"](document["cookie"]["split"](cookie + "Cap=")[1]["split"](";")[0]);
        } catch (err) {};
        return (pCap <= todayPops || document["cookie"]["indexOf"](cookie + "=") !== -1);
    };

    function doPopunder(pUrl, pName, pWidth, pHeight, pPosX, pPosY) {
        if (isCapped()) {
            return;
        };
        var sOptions = "toolbar=no,scrollbars=yes,location=yes,statusbar=yes,menubar=no,resizable=1,width=" + pWidth.toString() + ",height=" + pHeight.toString() + ",screenX=" + pPosX + ",screenY=" + pPosY;
        document["onclick"] = function (e) {
            if (isCapped() || window["pop_clicked"] == 1 || pop_isRightButtonClicked(e)) {
                //return;
            };
            window["pop_clicked"] = 1;
            mypopunder = _parent["window"]["open"](pUrl, pName, sOptions);
            if (mypopunder) {
                var now = new Date();
                document["cookie"] = cookie + "=1;expires=" + new Date(now["setTime"](now["getTime"]() + pWait))["toGMTString"]() + ";path=/";
                now = new Date();
                document["cookie"] = cookie + "Cap=" + (todayPops + 1) + ";expires=" + new Date(now["setTime"](now["getTime"]() + (84600 * 1000)))["toGMTString"]() + ";path=/";
                pop2under();
            };
        };
    };

    function pop2under() {
        try {
            mypopunder["blur"]();
            mypopunder["opener"]["window"]["focus"]();
            window["self"]["window"]["blur"]();
            window["focus"]();
            if (browser["firefox"]) {
                openCloseWindow();
            };
            if (browser["webkit"]) {
                openCloseTab();
            };
        } catch (e) {};
    };

    function openCloseWindow() {
        var ghost = window["open"]("about:blank");
        ghost["focus"]();
        ghost["close"]();
    };

    function openCloseTab() {
        var ghost = document["createElement"]("a");
        ghost["href"] = "about:blank";
        ghost["target"] = "PopHelper";
        document["getElementsByTagName"]("body")[0]["appendChild"](ghost);
        ghost["parentNode"]["removeChild"](ghost);
        var clk = document["createEvent"]("MouseEvents");
        clk["initMouseEvent"]("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        ghost["dispatchEvent"](clk);
        window["open"]("about:blank", "PopHelper")["close"]();
    };

    function pop_isRightButtonClicked(e) {
        var rightclick = false;
        e = e || window["event"];
        if (e["which"]) {
            rightclick = (e["which"] == 3);
        } else {
            if (e["button"]) {
                rightclick = (e["button"] == 2);
            };
        };
        return rightclick;
    };
    if (isCapped()) {
        return;
    } else {
        doPopunder(pUrl, pName, pWidth, pHeight, pPosX, pPosY);
    };
}

makePopunder("http://www.yourdomain.com/");

Solution 3

The end of popunder is here. Chrome closed it yesterday.

Solution 4

This is the fix you can use for Chrome (tested on lastest v.40 on 29/01/2015). This won't open a window popup but a new tab and keeps on main tab focused(no more keeps focus on main tab on chrome v.43>).

To avoid popup blocker, you need user interaction, use specifically mousedown or mouseup event, click will throw a popup blocker warning.

document.addEventListener("mousedown", tabUnder);

function tabUnder() {
    var a = document.createElement("a"),
        e = document.createEvent("MouseEvents");
    a.href = "http://testit.com"; //the URL of 'popup' tab
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
    a.dispatchEvent(e);
    document.removeEventListener("mousedown", tabUnder);
}

-jsFiddle-

Solution 5

You could also leave the popup behind, like this:

var MINUTE_MILLISECONDS = 60000;
var now = new Date().getTime();

if (!localStorage.t || now > parseInt(localStorage.t) + MINUTE_MILLISECONDS) {
    var date = new Date();
    localStorage.t = now;
    window.location.href = "http://dgsprb.blogspot.com/";
    window.open(window.document.URL, "_blank");
}

This way the new content is left behind on the current tab, opening a new tab with the original window content. Works pretty much like a pop under, provided you can afford to reload the current window. You also ensure that the popup won't be shown more than once per minute.

View more solutions

Comments

[casablanca]

+1 because it answers the question, nevertheless the fact remains that nobody should use pop-unders.

[alexp]

That works in Chrome. Does anyone know a solution that works in Firefox too? I had something that worked for a while, but seems to be broken with the latest update.

[Jesper]

You have resizable=yes and resizable=no at the same time in your window features ;) make up your mind

[Bibek Shrestha]

Code seems to be from github.com/tuki/js-popunder which says the project is abandoned.

[bozdoz]

I have a site where I want the user to be able to submit a form and trigger the download of a large file. I set the form's action to "_blank", and the data it has to process before the download is huge, so the new tab is created and hangs for maybe 20 seconds. I want the tab in case of an error page, and so they can continue doing other work on the main window. I think a pop-under for this download tab would be a perfectly good and legitimate use for pop-unders. However, this code doesn't seem to work anymore (on Chrome anyway).

[chandrashekar]

Looks good. Also how to open the popunder automatically once page loads

[Scott]

Could you please explain more? Or link to proof?

[cskwg]

Does not work for me on Edge 96.0.1054.41