I have a main window and a pop up window. Popup window is created on the main window.
Like parent.php is the main window. On this page, I have a JavaScript function to reload the page as below:
function popUpClosed() {
window.location.reload();
}
We can open popup window from parent.php. Now I want to execute popUpClosed() function on parent.php from popup window when we close / navigate the popup window.
I have tried following methods to achieve the same.
Method 1
window.onunload = window.onbeforeunload = function() {
if(window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
};
Method 2
window.onbeforeunload = Call;
function Call() {
if(window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
}
Method 3
window.onpagehide = function() {
window.opener.popUpClosed();
}
Everything is working is fine in every browser except Google Chrome. Chrome is not firing any of the function.
However, this is happening from last 2-3 days. Earlier all the things was working well in Chrome. (Might has been caused due to the latest Chrome updates)
Any suggest will be appreciated.
Latest google Chrome has a problem with window.opener. window.opener navigation inside a beforeunload/unload handler is ignored in the latest version. However there is a workaround for this. Try below code:
var btn = document.getElementById("btn");
function detectClick(event) {
var wind = window.open('urlhere', 'name', 'width=' + screen.width/2 + ', height=' + screen.height/2);
wind.onbeforeunload = function(){
popupClosed(wind);
}
}
btn.addEventListener("click", detectClick, false);
function popupClosed(wind) {
setTimeout(function() {
wind.opener.location.href = window.location.href;
}, 0);
}
<input id= "btn" type="button" value="open popup" />
THIS CODE WON'T EXECUTE HERE ON STACK OVERFLOW BUT WILL WORK IN BOTH: Chrome AND Mozilla Firefox WHEN EXECUTED THROUGH jsfiddle OR SERVER.
Here is a working code: jsfiddle
here is the link of bug report that confirms beforeunload/unload handler issue.
You can try the below code:
I have created the common function for open the POP up window:
function PopupCenter(url, title, w, h) {
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;
child = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
if (child.focus) {
child.focus();
}
}
For checking the child window closed or not I am using the setInterval function and check the interval like below:
function checkChild() {
if (child != undefined && child.closed) {
//alert("Child window closed");
clearInterval(timer);
location.reload();
}
}
DEMO
Related
Good afternoon
CONTEXT
We are using Pintrest JavaScript SDK to pop a dialog to pin something on Pinterest.
REQUIREMENT
We would like the pop up dialog to appear centered on the screen.
PROBLEM
Currently it's working but the dialog box appears at the wrong place.
CODE
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$.getScript('https://assets.pinterest.com/js/pinit.js', function () {
var pinObj = {
url: url,
media: ogImg.attr("content")
};
pinObj.description = 'description';
PinUtils.pinOne(pinObj);
QUESTION
Is there a way to make pinOne() method pop the dialog centered on the screen?
Regards,
Martin Ouimet
So it seems like you're referencing this from the Widgets API here.
To answer your question, I don't think there is a way to communicate where to open up the dialog. This would be hard in general because depending on the screen size or even the resolution, it's hard to pin point where "centered" is defined.
Looking at the source code of pinOne
pinOne: function(a) {
if (a.href) {
var b = e.f.parse(a.href, {
url: !0,
media: !0,
description: !0
});
b.url && b.url.match(/^http/i) && b.media && b.media.match(/^http/i) ? (b.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), b.description = e.d.title), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=invalid_url&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny())
} else a.media ? (a.url || (e.f.log("&type=config_warning&warning_msg=no_url&href=" + encodeURIComponent(e.d.URL)), a.url = e.d.URL), a.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), a.description = e.d.title), e.f.log("&type=button_pinit_custom"), a.href = e.v.config.pinterest + "/pin/create/button/?guid=" + e.v.guid + "&url=" + encodeURIComponent(a.url) + "&media=" + encodeURIComponent(a.media) + "&description=" + encodeURIComponent(a.description), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=no_media&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny());
a.v && a.v.preventDefault ? a.v.preventDefault() : e.w.event.returnValue = !1
},
The only real customization options you are offered include the url, media, and description. Doesn't really seem there is any way to communicate "centered".
That being said, I think this is simply a limitation of their Widget API. if you are hardcoding a specific pinterest link, you might be able to get away with just creating your own and passing in the windowFeatures. I tried it below and it "kinda" works (prob need to adjust the logic of determining the position.
document.getElementById('pinterest-link').addEventListener('click', function(e) {
var URL = e.target.getAttribute('data-pin-myownlink');
// assuming you want a 450x450 popup
var w = 450;
var h = 450;
// plagiarized from http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.availLeft;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.availTop;
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;
window.open(URL, "Pinterest Link", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
});
<a id="pinterest-link" href="#" data-pin-myownlink="https://www.pinterest.com/pin/create/button/?guid=Nsp1JckZPYuE-6&url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Click here</a>
StackOverflow disables popups so here's a jsFiddle
i tried to create link, if clicked will be popout a new windows browser with small size, i tried this code
<p>Click the button to open a new browser window.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open("http://www.w3schools.com");
}
</script>
the result is it success move to other link but opened in new tab on parent browser, what i tried to create is link opened in new window browser with small size.
You can set height and width.
window.open("http://www.w3schools.com", "", "width=200,height=100");
To set position center.
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;
window.open("http://www.w3schools.com", "", "width=200,height=100, top=' + top + ', left=' + left");
Try the code below:
window.open(url, windowTitle, "height=100,width=200");
When you specify height and width it will open a new window for you. I checked this with IE and it works fine.
Hope this will help you.
<script type="text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
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
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.
sorry if this is a repeat question!
I have the following Javascript which works fine in Firefox and produces a pop up window. In IE 9 however it does nothing at all and in Chrome it works like a link and changes the current page!
Any advice appreciated!
window.open(page,name,'width='+width+', height='+height+',location=yes,menubar=no,resizable=no,toolbar=no,scrollbars=yes');
Thanks in advance.
This is a working example
JS
function openWindow()
{
var width=668;
var height=548;
var page="http://google.com";
window.open(page, "awindow", "width="+width+",height="+height+",location=yes,scrollbars=yes, resizable=yes");
}
HTML
Open​
DEMO.
Did you create the variables correctly?
This code is working for me:
var page = 'page.php';
var name = 'pagename';
var width = 200;
var height = 100;
window.open(page,name,'width='+width+', height='+height+',location=yes,menubar=no,resizable=no,toolbar=no,scrollbars=yes');
EDIT
In my webapp I use the following function for opening windows. It should work in all browsers.
function wopen(url, name, w, h, scrollb) {
scrollb = typeof(scrollb) != 'undefined' ? scrollb : 'no';
w += 32;
h += 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
var win = window.open(url, name,
'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=' + scrollb + ', resizable=yes');
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
Where are you making the call to window.open? IE9 will block calls if they're made during page load as part of its popup blocker. Chrome does something similar, but redirects new windows to the main tab (thus, putting the user in control). As for Firefox... check your FF popup blocker settings.