obtain reference to _blank target window on form submit - javascript

I have a form that is opening a new window on submit:
<form id="form-id" target="_blank">
I want to access the newly created window via javascript, without manually generating a unique name for target, and without resorting to an alternative method for opening the window.
It seems like there has to be an easy way of doing this but I wasn't able to find one that will work in my specific situation.

Instead of _blank then you can use name your new window.
<form id="form-id" target="newName">
Then you can use it in JS by doing:
var newWindow = window.open(null, 'newName');

I'm not 100% sure this works in all browsers, but Firefox seems to set window.opener when a target attribute on an <a> or <form> causes a new window to open. Thus, you can go the other direction and find the original window from the new one (assuming you control the code there; if not, well I can't imagine you could do much with the window reference anyway).
Of course one of the things the code in the new window can do is call a function in the old window, passing in its own window reference.
Thus, specifically, if you have:
<form action=whatever target=_blank>
on the original page, then the page that ends up in the newly-opened window can do this:
<head>
<script>
if (window.opener) {
window.opener.announceWindow( window );
}
</script>
That assumes announceWindow() is a function on the original page, something perhaps like:
function announceWindow( win ) {
// do stuff with "win", a newly-opened window
}

Related

How to refresh another page using javascript without opening the same page in a new tab

Is it possible to refresh a page from another page using Javascript or JQuery without opening the same page in a new tab.
JS:
var newtab = window.open('http://localhost:8081/app/home');
newtab.document.location.reload(true);
I tried the above, but here, it will open a new tab, with the same page, which is already opened in the browser.
Please suggest a method.
I got the idea from a previous Question , here they used window Object Reference to reload the popup window, but for me it wont work, because, the parent window and child window runs in 2 different ports. So using the same trick, what i did is :
HTML:
<a onclick="openNewTab()">app2</a>
<a onclick="refreshExistingTab()">Refresh</a>
JS:
<script>
var childWindow = "";
var newTabUrl="http://localhost:8081/app/home";
function openNewTab(){
childWindow = window.open(newTabUrl);
}
function refreshExistingTab(){
childWindow.location.href=newTabUrl;
}
</script>
refreshExistingTab() this instend of refreshExistingTab
take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window.open
basically if you do window.open and specify a window name it will overwrite that window with the url you provided.
so if you open the page each time with same window name, it should overwrite it each time you do it again from that other page.

How do identify whether the window opened is a pop up or a tab?

I have been facing a problem.I am able to open a window using window.open method.If I specify the height and width of the window,it opens as a pop up window.If no parameters is given for height or width,then it opens in a new tab.
Is there any property through which I can determine window opened was a pop up or a new tab?
Thank you
Malcolm X
Edit: I have been looking into this a little further.
Seems like there is no different "type" on these windows, simply different options.
A way I found to check if it was a tab or window is to check window.menubar.visible.
For the tab, which is a full and normal window it is true, and for the pop-up the menu is hidden and therefore false. Same applies to window.toolbar.visible.
Works in FF and Chrome at least. Unfortunately not in IE. (Testing done in IE8, which is the version I have installed. For testing of course..)
Example:
if(window.menubar.visible) {
//Tab
} else {
//"Child" Window
}
Found this thread: Internet Explorer 8 JS Error: 'window.toolbar.visible' is null or not an object
If you specify width and height, it means that you also have to specify the name parameter. This can be used in the same way target in an a tag is used, and defaults to _blank.
If you do not specify width and height I assume you also don't specify name and therefore it is opened with name=_blank, which means a new Tab.
If you specify width and height, are you setting a custom name? Doing so results in a child window. If you specify a name, or empty string as name, I suggest you try name:_blank if you want it to be a new tab.
If the window was opened with a name, you can always the window.parent from the child window. If you open with _blank I am not sure if you can get the window.parent
w3schools Window Open
I'm not quite sure what you mean in your question but from what I understand, you might want to use the HTML target attribute:
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
Source: http://www.w3schools.com/tags/att_a_target.asp
You can detect that using onblur, by checking whether the focus is missed or not
<html>
<head>
<script>
function newTab() {
document.getElementById("demo").innerHTML = "New tab opened!<br><br>refesh this page to recheck ";
}
window.onblur = newTab;
</script>
</head>
<body>
<div id="demo">
Open a new tab and then check this page
</div>
</body>
</html>

What is the equivalent of window.opener without opening a new window?

A library I am using gets a reference to the main window by adding this script to a popup window:
var winMain=window.opener;
This script lets the popup window access global variables from the window that opened it. Example:
<select name=MonthSelector onChange="javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();">
However this leaves me in an awkward position if I try to call some of these variables without opening a new window. (For instance, if I try to embed one of the calendars inside a div instead of a new window.)
onChange="javascript:Cal.SwitchMth(this.selectedIndex);"
and
var winMain=window;
onChange="javascript:winMain.Cal.SwitchMth(this.selectedIndex);"
Both don't seem to work. Is there some way to get the current window's handle as a variable? Or an I just doing something wrong?
This question appears similar to mine, but the answers don't work.
change it to
var winMain = window.opener || window;
It says is there is no window.opener, use window.
A window.open equivalent is below
var w = window.open('', '', 'width=400,height=400,resizeable,scrollbars');
w.document.write('Content goes here');
w.document.close();
Use it according to your need.

Access a window by window name

If I open a window using
window.open('myurl.html', 'windowname', 'width=100,height=100');
How do I refer to the new window (from the same page that opened it) using 'windowname'? This question is specifically about this. I'm aware that I could save a reference to the handle by using "var mywin = window.open(...)" but I don't care about that in this situation.
Thanks, - Dave
In firefox (might work in other browsers too, but now it's not my concern) I was able to reference one window accross multiple page loads with
var w = window.open("", "nameofwindow");
This opens new window if it doesn't exist and return reference to existing window if it does exist without changing contents of the window.
With jQuery I was then able to append new content, to make quick collection of interresting links like this
$('body', w.document).append(link_tag);
If you didn't save a reference to the window then there is no way to restore it. However, if that window is still open and if the page loaded there belongs to the same domain as your page, you can run JavaScript code in it:
window.open("javascript:doSomething()", "windowname");
Whether that's sufficient in your scenario depends on what you are trying to achieve.
Petr is correct:
var w = window.open("", "nameofwindow");
works in all browsers, I am using it to retrieve the reference to the window object previously opened by a different page. The only problem is the initial opening of the page, if the popup does not exist, you will get a new window with a blank page.
I tried invoking a Javascript function inside the context of the other document in order to check whether I opened a new window or retrieved the already active page. If the check fails, I just invoke window.open again to actually load my popup content:
var w = window.open("http://mydomain.com/myPopup", "nameofwindow");
Hope that helps.
It is not possible. The windowName is just to be used in target="..." of links/forms or to use the same name again in another window.open call to open a new url in that window.
Try open that window with the name, but URL is '' again, to check if it's a blank window or not. If it's in open, then you will get the window; if not, a new window open, and you need close it.
Add the children in localStorage will help to prevent to open the new blank window.
Please check my code in https://github.com/goldentom66/ParentChildWindow
Sorry I am posting late, but if you still have the other window open, and they are on the same domain, you can run, on the first window:
function getReference(w) {
console.log('Hello from', w);
}
And on the second window:
window.opener.getReference(window);
afaik there's no way like windows['windowname'].
The 'windowname' assigned in window.open() can be addressed as a target in <a target="windowname" [...] >

modifying a new window using Javascript contained in the parent page

Is there a way by which a user can click on a link in a webpage, which would then trigger a new window being opened up, which is then populated with content by javascript from the original page?
I need to write a self contained HTML file (so cannot use external links) that is able to BUILD a new window with predefined content...
Yes. JavaScript's window.open method should be used for opening a new window.
That method returns back an object corresponding to a new window, so your JavaScript code can now access new window's DOM objects using that object.
See this.
You can open a new window (window.open) and write the content of the inner document stream programmatically, using document.write.
function example () {
var newWindow = window.open('about:blank','name','height=400,width=500');
newWindow.document.write('<html><head><title>Test</title>');
newWindow.document.write('</head><body>');
newWindow.document.write('<p>Test page generated programmatically.</p>');
newWindow.document.write('</body></html>');
newWindow.document.close();
}
Here is a basic example of writing content to a child window:
child_window = window.open('', 'name', 'width=300,height=300');
child_window.document.write('<h1>Hello World</h1>');

Categories