问题
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.
回答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.
回答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/");
回答3:
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-
回答4:
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.
回答5:
The misterious code of @dixie works for me on firefox, I.E, and almost Chrome (it doesn't focus on the main window but on the pop-up).
To make it perfectly work on Google Chrome, I simply added this to regain focus:
path = window.document.URL;
window.open(path,"_self");
回答6:
The end of popunder is here. Chrome closed it yesterday.
回答7:
window.open('http://google.com','','height=500,width=500');
window.open().close();
Don't use popunders for evil
来源：https://stackoverflow.com/questions/4261784/making-a-window-pop-under-in-chrome