Controlling browser window through Javascript - javascript

I have a web app that launches an URL in other windows/tabs. I would like to check if the window/tab exists. If not, I want to create it, else I would like to pick it in the first position.
I use:
wf=window.open(address, web_form_target, 'toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1,width=640,height=450');
if(wf!=null)
wf.focus();
But it goes well only the first time (in IE, not in Firefox). If I create a new tab in the window, when I call window.open() nothing happens. If I close the window it recreates it but keeps it ionized.
Is there a way I can follow to obtain a good result?
Thanks in advance.

Here's some code I've used for ages that still works as far as I know. Notice that oWindow has global scope, and that I pass it to the second parameter of open as a string, not as the object itself. Then, I test to see if it's closed before trying to open again...if it's already opened, then I just give it focus:
var oWindow;
function openWindow(p_strURL) {
if(!oWindow || oWindow.closed) {
oWindow = window.open(p_strURL, "oWindow", "status, scrollbars, resizable, width=800, height=500");
if(!oWindow.opener) {
oWindow.opener = window;
}
}
else {
oWindow.location.href = p_strURL;
oWindow.focus();
}
}
Hope it helps you find a solution,
Kevin

web_form_target is the window name.
if (wf.name !== web_form_target) {
// create it
}

Related

How can I console.log to parent window?

I've got a function that essentially refreshes a table, which works ok, but some of the JS functions don't run. To debug I'm trying to pass data between a popup and it's parent window. Currently I have this function:
$.fn.runFncs = function(isParent)
{
if (isParent == 1) {
window.opener.$.fn.compareDates();
window.opener.$.fn.addStatusIcon();
window.opener.$.fn.iconTooltips(1);
window.opener.$.fn.iconTooltips(2);
window.opener.console.log('test');
} else {
$.fn.compareDates();
$.fn.addStatusIcon();
$.fn.iconTooltips(1);
$.fn.iconTooltips(2);
}
};
and this gets run on an ajax success.
When I hit the button for the ajax, I get my success message etc. but no console.log in my parent window. I've been able to access the parent window before using window.opener and it seems to run ok, just not this time for some reason.
I tried research but either my query was too specific or it was simple "what is console.log" questions so a little stuck here.
Is there an alternative way I can console.log to the parent window? Maybe a document function I'm unaware of?
Thanks! :)
function log(message){
console.log(message);
}
Put that function in your parent window and call it like so. You basically need to provide a wrapper function that you can access
window.opener.log("Hi");
You cannot access directly from one window/tab to anothers's console object, but you can send messages from one window to another. The parent window would get that messages and then it would write it on the console. See this Q&A for more details:
I tried out in recent (2018 aug) Firefox, Chrome and Opera and IE11 too and window.opener.console.log works perfectly in all of them. So I think the problem were somewhere else in your code.
You could even do child.console = console in the parent window and keep console.log, but most of the browsers clear that variable between page loads, and there is no way to set it again right after the document was created, but before the scripts are executed. You can add window.console = window.opener.console to the head of the child page if you can edit that. That should do the trick too.

How to extract target hostname during onbeforeunload event

I'd like to warn the user when he/she tries to navigate away from my webapp when his/her project is unsaved. Currently I don't care about edit boxes which are currently under edit. I know the project's dirty state from the session.
I quickly realized that if I set a function for the window.onbeforeunload, it'll disturb the user even if he/sh navigates to another page within my webapp. In such case no disturbance needed, the session will be still alive.
I tried a solution derived from Fire onbeforeunload only when window is closed (includes working example)
window.onbeforeunload = function (e) {
var targetHost = new URL(e.target.URL).hostname;
if (targetHost != window.location.host)
return "Project is unsaved!!!";
else
return null;
};
The new URL(e.target.URL).hostname results in (at least on IE11):
JavaScript runtime error: Object doesn't support this action
And mysteriously I can't find anything about no new URL(e.target.URL).hostname by any search.
But at the same time I hope this is not impossible, I cannot believe others didn't experience this.
There are two problems in your script:
window.onbeforeunload = function (e) {
var targetHost = new URL(e.target.URL).hostname;
if (targetHost != window.location.host) {
return "Project is unsaved!!!";
else
return null;
};
The first is that you did not close your if. The second is that e.target.URL is apparently not supported by IE. You need to have an A and a B plan.
A plan: Applies to the case when e.target.URL exists. In this case, you handle the case as you initially implemented, but with the syntax fix mentioned above.
B plan: Applies to the case when e.target.URL does not exist. For this case, you should assume that the user leaves the site. You can improve the approach by adding knowledge when the user uses your control to navigate, for instance, you know that a given anchor will stay on the site. In this case, you can define a click event and set a boolean value to true (and the default value of that boolean should be false...), so that later your onbeforeunload event will know that your user stayed on the site even if he or she uses IE.
So you need a logic like this:
var targetHost = !!e.target.URL ? (new URL(e.target.URL).hostname) : ((myFlag) ? (window.location.hostname) : ("elsewhere"));

Callback for a popup window in JavaScript

I hope I did my homework well, searching the Internets for the last couple of hours and trying everything before posting here, but I'm really close to call it impossible, so this is my last resort.
I want a simple thing (but seems like hard in JavaScript):
Click button -> Open Window (using window.open)
Perform an action in the popup window and return the value to parent (opener)
But I want to achieve it in a systematic way, having a callback defined for this popup; something like:
var wnd = window.open(...)
wnd.callback = function(value) {
console.log(value);
};
I've tried defining the callback property in popup window JS code:
var callback = null;
Unfortunately, that does not work, as...
$('#action').click(function() {
console.log(callback);
});
... returns just that "null" I set initially.
I've also tried setting the callback in a parent window after window load (both thru window.onload=... and $(window).ready()), none worked.
I've also tried defining some method in child window source code to register callback internally:
function registerCallback(_callback)
{
callback = _callback; // also window.callback = _callback;
}
But with the same result.
And I don't have any more ideas. Sure, it would be simple setting the value using window.opener, but I'll loose much of a flexibility I need for this child window (actually an asset selector for DAM system).
If you have some ideas, please share them.
Thank you a million!
HTML5's postMessage comes to mind. It's designed to do exactly what you're trying to accomplish: post messages from one window and process it in another.
https://developer.mozilla.org/en/DOM/window.postMessage
The caveat is that it's a relatively new standard, so older browsers may not support this functionality.
http://caniuse.com/#feat=x-doc-messaging
It's pretty simple to use:
To send a message from the source window:
window.postMessage("message", "*");
//'*' is the target origin, and should be specified for security
To listen for messages in a target window:
window.addEventListener
("message", function(e) {
console.log(e.data); //e.data is the string message that was sent.
}, true);
After few more hours of experiments, I think, I've found a viable solution for my problem.
The point is to reference jQuery from parent window and trigger a jQuery event on this window (I'm a Mac user but I suppose, jQuery has events working cross-platform, so IE compatibility is not an issue here).
This is my code for click handler on anchor...
$(this).find('a[x-special="select-asset"]').click(function() {
var evt = jQuery.Event('assetSelect', {
url: 'this is url',
closePopup: true,
});
var _parent = window.opener;
_parent.jQuery(_parent.document).trigger(evt);
});
... and this is the code of event handler:
$(document).bind('assetSelect', function (evt) {
console.log(evt);
});
This solution is fine, if you don't need to distinguish between multiple instances of the asset selection windows (only one window will dispatch "assetSelect" event). I have not found a way to pass a kind of tag parameter to window and then pass it back in event.
Because of this, I've chosen to go along with (at the end, better and visually more pleasant) solution, Fancybox. Unfortunately, there is no way - by default - to distinguish between instances either. Therefore, I've extended Fancybox as I've described in my blog post. I'm not including the full text of blog post here, because is not the topic of this question.
URL of the blog post: http://82517.tumblr.com/post/23798369533/using-fancybox-with-iframe-as-modal-dialog-on-a-web

Does popup exist? (javascript)

I'm trying to determine whether a popup exists in javascript. I do know its name (passed in window.open()), but I do not have a window reference. For example consider this: I have a web page A which calls window.open('url', 'popup') and I have web page B which also wants to call window.open('url', 'popup') unless such popup exists. In this case B just focuses on popup. So web page B has no reference to popup (and it cannot have, we may assume that A and B are independent). Is there a way to do that?
You should be able to do it if you play around with your window structure.
Whenever I've come across this problem I've had a main window which always exists. Then, when calling window.open, I grab the handler that that function returns and then assign it to the main window that I know will always exist.
Then, whenever calling window.open, I go off and check main window to see if it has an open window handler for the popup window.
So, assuming you have that main window that always exists (you could always use have a window that uses a frame to display your actual content so, to your users, it'll look the same), you could do something like:
var mainWindow = window;
while(mainWindow != mainWindow.parent){
mainWindow = mainWindow.parent;
}
if(mainWindow.PopupWindow === undefined || mainWindow.PopupWindow.closed){
var handler = window.open('url', 'popup');
mainWindow.PopupWindow = handler;
}
I've always had a few problems using the closed property of the window object, so you may need to map a function to the onunload event within the popup window that just clears out the PopupWindow variable on the mainWindow, and then add that check within your if statement too.

closing javascript child window

function displaymessage()
{
window.open("http://www.sabah.com.tr","_blank")
parentWindow.close
}
How should I write instead of "parentWindow.close" to close the child page?
not 100% sure what you mean, maybe you want this:
function displaymessage() {
var win = window.open("http://www.sabah.com.tr","_blank")
win.close();
}
You need to maintain a reference to the opened window:
function displaymessage() {
var myWin = window.open("http://www.sabah.com.tr","_blank");
myWin.close();
}
..but most browsers will prompt you saying "this page is trying to close....", just be aware of that, and test various browsers to make sure you get the desired result.

Categories

Resources