I have a button inside the parent window that will open the popup window.
If the user closes the popup window, the parent window should get the window focus.
How can I do this in vanilla javascript?
function Popup(url, title, w, h) {
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);
if (window.focus) {
newWindow.focus();
}
newWindow.onunload = function() {
if (window.opener && !window.opener.closed) {
window.opener.focus();
}
};
}
Assuming that the "parent window" has an HTMLElement that can be focused, you can use .focus on that HTMLElement.
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 doing FreeCodeCamp's Random Quote Machine exercise.
Using this answer, I tried to set up my tweet button to open up a new window rather than a tab that the user could use to Tweet this quotes with.
The only issue is is that it is opening up a new tab as well as a new window. Is there any way I could get it to just open the new window?
HTML for Tweet Link
<a class="twitter-share-button" href="https://twitter.com/intent/tweet" target="_newwin">
Tweet</a>
Related JavaScript
jQuery('a[target^="_newwin"]').click(function() {
var width = 500;
var height = 300;
window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
});
Pen of my Project
Thank you!
You are getting both your custom behavior (opening a new window) and the standard behavior of a link (in most browser nowadays, opening a new tab). To prevent the latter, you need to use the ´preventDefault´ method:
jQuery('a[target^="_newwin"]').click(function(e) {
e.preventDefault();
var width = 500;
var height = 300;
window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
});
I have a link on a page on clicking which I open a new window like a popup.
Now I would like the user to close it before he can go back to the old page. He should not be able to navigate to other tab before closing it. How would I do this?
<script type="text/javascript">
function popup(url) {
var width = 300;
var height = 200;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin = window.open(url, 'windowname5', params);
if (window.focus) {
newwin.focus()
}
return false;
}
</script>
Centered popup window
You should define your window as a modal window, window.showModalDialog.
Look at the following instructions showModalDialog
An alternate way is to use jQuery dialog. in this case the whole screen is blocked and user can not do anything until dialog is closed. see here
Create Close button in your popup.html page then close a window.
<input type="button" value="Close" onclick="window.close()">
thank u..
I have a custom function that will open a window to the center of the screen from a different url. On my current case I am opening a url outside my domain. This is my function.
function wopen(url, name, w, h) {
w += 32;
h += 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
if (wleft < 0) {
w = screen.width;
wleft = 0;
}
if (wtop < 0) {
h = screen.height;
wtop = 0;
}
var win = window.open(url,
name,
'width=' + w + ', height=' + h + ', ' +
'left=' + wleft + ', top=' + wtop + ', ' +
'location=no, menubar=no, scrollbars=yes');
// +
//'status=no, toolbar=no, scrollbars=no, resizable=yes');
win.resizeTo(w, h);
win.moveTo(wleft, wtop);
win.focus();
}
This works perfectly on IE6, and FF but not on IE7
The issue is that you are attempting to open a window with a separate domain, which in IE7 and higher is considered a security issue. Essentially, when you open that new window, it creates a new process and leaves your process separate, so you can no longer manipulate that other window.
http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/e9cebb92-f943-4a79-b29b-7376039ea6a0
http://msdn.microsoft.com/en-us/library/Bb250462.aspx
So, once you open that new window with a domain different from your own, you lose control of it. I don't see a way to change this without adjusting the end-users computer.
EDIT
Hmm, apparently you can get around this by opening a window that you do have control of, then changing the window.location.href to your url. Try this:
function wopen(url, name, w, h) {
w += 32;
h += 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
if (wleft < 0) {
w = screen.width;
wleft = 0;
}
if (wtop < 0) {
h = screen.height;
wtop = 0;
}
var win = window.open('about:blank', // <- Note about:blank
name,
'width=' + w + ', height=' + h + ', ' +
'left=' + wleft + ', top=' + wtop + ', ' +
'location=no, menubar=no, scrollbars=yes');
// +
//'status=no, toolbar=no, scrollbars=no, resizable=yes');
win.location.href = url;
win.resizeTo(800, 150);
win.moveTo(wleft, wtop);
win.focus();
}
wopen('http://www.yahoo.com/', 'yahoo', 250, 250);
I don't know if this is a hack or not; I'm surprised it's that easy to get around, at least for changing window resize and whatnot. But, it works (at least on IE8).
there are many security things that a browser and os checks for any window.
for this case, i am not sure but try this also.
if your mouse button is clicked and hold on at the time of resizing browser window through your js code then you will get access denied error.
reason is OS denied such activities when real physical users is ready for mouse drag event.
see below url
http://prcoldfusion.blogspot.com/2012/06/access-denied-javascript-error-internet.html