How do I open a new window in javascript properly?
I've tried:
<a href='javascript:window.open("testing.html","mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0");' >New Window</a>
This causes a new window to pop up but in Firefox it leaves the original page with a blank window saying "[object Window]". I've also had issues with IE as well.
How can I open a window that works in Firefox, IE, Safari and Chrome?
Bonus: If you can help in creating a link that is javascript degradable (I think that's the term).
By putting the script in the href property, the link will follow the string representation of the return value of the script.
The most backwards compatible way is to put the url and target in the link as regular attributes, and use the onclick event to open a window instead of following the link. By returning false from the event you prevent the link from being followed:
New Window
If Javascript is disabled in the browser, it will follow the link instead and open it in a new window.
Use the target _blank to open a new window.
javascript: links are pretty old-school. Try it with an onclick attribute. And don't forget to return false in the onclick handler to prevent the main page from following the link too.
New Window
you could add void(0) to your javascript code which will prevent the browser from doing anything to the current window
<a href='javascript:window.open("testing.html","mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0"); void(0)' >New Window</a>
<a href='javascript:(function(){window.open("testing.html","mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0")}();' >New Window</a>
Or make it a function:
File
<script>window.onload = function(){
document.getElementsByTagName('a').onclick =
function(evt){ el = evt.target; if (el.className == 'popup'){
window.open(el.href,"mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0");
return false; }; };</script>
Related
I know that I can use <a href="" target="_blank"> to open a new window. I can also use onclick even handler to create the window and fill it with dynamic content, like win = open(""); win.document.innerHTML =. But, the latter forces me to use button and create window explicitly instead of relying on default <a> functionality. Can I combine them, to use <a> to open the window and it's onclick to fill it?
win.body.innerHTML only works if you open a page that has a body. Some browsers might do that (open a dummy document) for you, but certainly not all
Here is a link - I use inline JS for demonstration, a better choice is to assign the onclick in onload of the page:
Here is a JSFiddle since the SO Snippet does not allow the popup
<a href="activateyourjsandallowpopups.html"
onclick="var w = window.open('','_blank'); // may fail if blocked
if (w) { w.document.write('Hello'); w.document.close(); }
return !w">Click</a>
Perhaps you mean this?
<a href="pagefrommyserver.html" target="myWin"
onclick="setTimeout(function() {
var w = window.open('','myWin'); // get the opened window handle
if (w) { w.document.body.innerHTML = 'Hello'}
},200)">Click</a>
I am opening a new window on clicking a hyper link.
Issue:
After minimizing the window, again if I click on hyper link, the same window should be opened(In chrome minimized window will open up). But this is not happening in firefox and IE. Can anyone please help.
<html>
<head></head>
<body>
<p>Visit our HTML tutorial</p>
</body>
</html>
window.open allows you to specify a unique identifier to your popup; this allows you to open many links always in the same popup window.
If you use different identifiers on different links, it should open multiple popup windows.
<p>
Visit our HTML tutorial
</p>
<p>
Visit our HTML tutorial
</p>
If the strWindowFeatures parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.
you might want to check this link
window.open web api for mozilla
The idea of Unique ID in the parameter's list simply doesn't work as suggested in another answer.
You need a function for to do what you need in IE and FF. The trick is to get a function to see if it has opened a window before and do nothing if it has.
<script>
var opened = false;
function openWindow(){
if (!opened) {
w = window.open('', 'test', 'width=1500, height=900');
w.location = "http://www.google.com";;
w.onload = function() {
w.onunload = function() {
opened = false;
};
};
opened = true;
}
}
</script>
I'm using the opened global variable to track this. We set the newly created window to set false to this variable when it closes. Now the function can decide if it should really open a new window. Please note the following points:
We use onLoad function of the new window to set onUnload. Because IE seems to replace whatever the event handlers set here soon after it loads the page.
You can see that we first open a blank window and then set the url of it. This is because IE returns nothing when opening a new window if it is from another domain.
This line is from my JSP file.
I opened this page by setting a target attribute in the <a> tag like target ="_TOP", but the code below is not working. How can I close this window?
<div>click</div>
You can only close a window with JavaScript that has been opened with JavaScript. Since you went with an HTML method, this won't work.
However, if you were to re-code so that JavaScript was opening the window instead...
mylink
Then you could close the resulting window with JavaScript.
target should be _top - this will not pop a NEW window but overwrite the current - is that what you want
try this
<a href="page.jsp" target="_blank"
onclick="var w=window.open(this.href,this.target); return w?false:true">pop a new window</a>
or
<a href="page.jsp" target="mywin"
onclick="var w=window.open(this.href,this.target); return w?false:true">pop a new window</a>
the later you can get the handle:
var w = window.open('','mywin');
if (!w.closed) w.close()
This is what I am trying to do: Once submit a form on my main JSP/HTML page a new page with some link opens. When I click on any of the link the link should open in the parent Window. I.e the Window I started from. How do i do this?
Use window.opener.location.href in javascript
For example,
Click me!
You'll need JavaScript for this. HTML's target can't target the window's parent (opener) window.
The following will open the page in the parent window if JavaScript is enabled, and open it in a new window if it is disabled. Also, it will react gracefully if the current page does not have an opener window.
<a href="page.php"
onclick="if (typeof window.opener != 'undefined') // remove this line break
window.opener.location.href = this.href; return false;"
target="_blank">
Click
</a>
MDC Docs on window.opener
Use parent.location.href if it's on the same page in an iframe. Use opener.location.href if it's another entire tab/window.
I have a few links that should all open in the same window or tab.
To accomplish this I've given the window a name like in this example code:
<a href="#" onClick='window.open("http://somesite.com", "mywindow", "");'>link 1</a>
<a href="#" onClick='window.open("http://someothersite.com", "mywindow", "");'>link 2</a>
This works OK in internet explorer, but firefox always opens a new tab/window.
Any ideas?
Actually, the W3Schools documentation linked to by gabriel1836 is only a very very brief summary of functions.
And Oddly, mozilla's own developer reference CONTRADITCS this logic.
MDC / DOM / Window.open
var WindowObjectReference = window.open(strUrl,
strWindowName [, strWindowFeatures]);
If a window with the name
strWindowName already exists, then,
instead of opening a new window,
strUrl is loaded into the existing
window. In this case the return value
of the method is the existing window
and strWindowFeatures is ignored.
Providing an empty string for strUrl
is a way to get a reference to an open
window by its name without changing
the window's location. If you want to
open a new window on every call of
window.open(), you should use the
special value _blank for
strWindowName.
However, the page also states that there are many extensions that can be installed that change this behaviour.
So either the documentation mozilla provides for people targeting their own browser is wrong or something is odd with your test system :)
Also, your current A-Href notation is bad for the web, and will infuriate users.
<a href="http://google.com"
onclick="window.open( this.href, 'windowName' ); return false" >
Text
</a>
Is a SUBSTANTIALLY better way to do it.
Many people will instinctively 'middle click' links they want to manually open in a new tab, and having your only href as "#" infuriates them to depravity.
The "#" trick is a redundant and somewhat bad trick to stop the page going somewhere unintended, but this is only because of the lack of understanding of how to use onclick
If you return FALSE from an on-click event, it will cancel the links default action ( the default action being navigating the current page away )
Even better than this notation would be to use unintrusive javascript like so:
<a href="google.com" rel="external" >Text</a>
and later
<script type="text/javascript">
jQuery(function($){
$("a[rel*=external]").click(function(){
window.open(this.href, 'newWindowName' );
return false;
});
});
</script>
The window.open() function in Javascript is specifically designed to open a new window, please see: w3schools documentation. It actually sounds like IE is handling things in a non-standard way (which is hardly surprising).
If you want to relocate the existing location to a new page using Javascript, you should look at the location.replace() function.
Generally speaking I would recommend that you develop for Firefox and then fix for IE. Not only does Firefox offer better development tools but its implementation of W3C standards tends to be more correct.
By default FF uses a new tab if dimensions are omitted on the window.open parameters. You need to add dimensions for a new browser window.
Try this:
<a href="#" onClick='window.open("http://somesite.com", "mywindow", "width=700", "height=500");'>link 1</a>
Why don't you just use plain HTML like
Link
instead of using JavaScript?