How can I fix popup window (window.open()) to parent window? When I click to another tab my window is lost.
function popitup(url, w, h) {
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
popupWindow = window.open(url, title,"resizeable=yes,location=no,width=" + w + ", height=" + h + ",top=" + top + ",left=" + left + ", overflow-x=hidden");
popupWindow.pw = pw;
if (window.focus) {
popupWindow.focus()
}
return false;
}
If you want the popup attached to the page like that, don't use a popup at all; use an absolutely-positioned element within the page (for instance, a div) and load the relevant HTML into that div.
Related
I want to open my application page on the second screen using Javascript. I got an example from one of the answers to this question. The example works well, if I have my parent application on the right screen, it opens the window on left. But it does not work if my parent screen is on left screen.
What I want is, I want to open the window on other screen to my parent page screen. This is how the example looks like.
function PopupCenter(url, title, w, h, opts) {
var _innerOpts = '';
if(opts !== null && typeof opts === 'object' ){
for (var p in opts ) {
if (opts.hasOwnProperty(p)) {
_innerOpts += p + '=' + opts[p] + ',';
}
}
}
// Fixes dual-screen position, Most browsers, Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
console.log('dualScreenLeft' + dualScreenLeft);
console.log('dualScreenTop' + dualScreenTop);
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
console.log('wigth' + width);
console.log('height' + height);
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
console.log('calculated left ' + left);
console.log('calcualted top ' + top);
var newWindow = window.open(url, title, _innerOpts + ' width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
};
What I should change in my code so it automatically detects the screen and opens the window on another screen.
I am trying this on Firefox and IE (11).
Please check the following diagram, in the multi-monitor/screen environment, the element position in second screen is the start of (1920,0) (suppose the screen resolution is 1920*1080).
// X,Y X,Y S = Screen, W = Window
// 0,0 ---------- 1920,0 ----------
// | | | --- |
// | | | | W | |
// | S | | --- S |
So, we could get the parent window position first, then compare with the screen width and detect whether it is located on the first or second screen, Then, when we open the popup window, we could set the window left property and open it in another screen.
Please refer to the following code:
<script type="text/javascript">
function OpenWindow() {
PopupCenter("https://www.google.com/", "Google", 900, 500, null);
}
function PopupCenter(url, title, w, h, opts) {
var _innerOpts = '';
if(opts !== null && typeof opts === 'object' ){
for (var p in opts ) {
if (opts.hasOwnProperty(p)) {
_innerOpts += p + '=' + opts[p] + ',';
}
}
}
//get the screen width and height.
var screenwidth = window.screen.width;
var screenheight = window.screen.height;
console.log("screen width: " + screenwidth);
console.log("screen height: " + screenheight);
//get current window position. For Firefox, use ["window.screenX"](https://www.w3schools.com/jsref/prop_win_screenx.asp) and ["window.screenY"](https://www.w3schools.com/jsref/prop_win_screenx.asp)
// Fixes dual-screen position, Most browsers, Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
console.log('dualScreenLeft' + dualScreenLeft);
console.log('dualScreenTop' + dualScreenTop);
//get current window width and height
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
console.log('current window wigth:' + width);
console.log('current window height:' + height);
var left = 0;
var top = 0;
console.log('calculated left ' + left);
console.log('calcualted top ' + top);
//if parent window located in the second screen. set the popup window left property: from 0 to 1920 (the first screen width)
if (dualScreenLeft >= 1920) {
left = 0;
}
else {
//
left = 1920;
}
var newWindow = window.open(url, title, _innerOpts + ' width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus()) {
newWindow.focus();
}
};
</script>
<input type="button" value="Open window" onclick="OpenWindow();" />
Hi I used the Popupcenter function which is from neofnd/popupCenter to open the aspx page. The aspx page is opened but buttons in the aspx page doesn't fire, no postback. Does someone tell me how to solve it. Thanks in advance.
There is the code from github
function PopupCenter(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
There is my button to open call this function.
I am having the following javascript which open ups a child window with the sizes and align it int he center of the screen
function PopupCenter(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
var timer = setInterval(checkChild, 500);
function checkChild() {
if (newWindow.closed) {
var message = 'You have aborted the transaction by closing the window !';
var status = 'closed';
paymentResponseDisplay(message,status)
clearInterval(timer);
}
}
window.onbeforeunload = function() {
if(!newWindow.closed){
return "Do you really want to abort this transaction?";
}
}
}
But in safari I am getting
TypeError: undefined is not an object (evaluating 'newWindow.focus')
I am unable to find a fix for this. Can some one help out?
In my case, this problem occurred because I called popup from the ajax result in the Safari.
I received ajax with sync and it worked fine.
window.open() works different on AJAX success
The below code working fine in IE, but it is not working in Chrome, Fire Fox and Safari.
function popWindow() {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = width - 0.1;
var top = height - 0.1;
var newWindow = window.open('HtmlPage1.html', 'SessionKill', 'scrollbars=0,toolbar=0,menubar=0,directories=0,titlebar=no,addressbar=0,status=0,resizable=0,location=0,directories=0, width=10, height=10, top=' + top + ', left=' + left, "_blank");
newWindow.blur();
window.focus();
}
When I use the FB.login function from the JavaScript SDK, popup shows up, but it is aligned all the way to the right and appears on the second monitor screen. This only happens if browser window is maximized, if it is not maximized popup is centered correctly.
Reproducible in IE 10, Firefox 20
I've ended up overriding the window.open and changing the left= in attribute string. FB API puts ridiculously large number in there for some reason.
Window.open overide worked for me too...
placing code snippet to help on it:
window.open = function (open) {
return function (url, name, features) {
var w = 475;
var h = 183;
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var override_features = 'width=475,height=183,left=' + left + ',top=' + top + ',scrollbars=1,location=1,toolbar=0';
// set name if missing here
//name = name || "default_window_name";
return open.call(window, url, name, override_features);
};
}(window.open);
w = desired popup window width
h = desired popup window height
u use the override_feature variable to set any param you wish.