Open button in new window?

34

votes

How would I go about making the button open in a new window, emulating "a href, target = _blank"?

I currently have:

<button class="button" onClick="window.location.href='http://www.example.com';"> 
     <span class="icon">Open</span>
</button>

The button isn't in a form, I just want to make it open in a new window.

javascripthtmlbuttonwindownew-operator

80

votes

Opens a new window with the url you supplied :)

<button class="button" onClick="window.open('http://www.example.com');">
     <span class="icon">Open</span>
</button>

hope that helps :)

7

votes

I couldn't get your method to work @Damien-at-SF...

So I resorted to my old knowledge.

By encasing the input type="button" within a hyperlink element, you can simply declare the target property as so:

<a href="http://www.site.org" target="_blank">
<input type="button" class="button" value="Open" />
</a>

The 'target="_blank"' is the property which makes the browser open the link within a new tab. This attribute has other properties, See: http://www.w3schools.com/tags/att_a_target.asp for further details.

Since the 'value=""' attribute on buttons will write the contained string to the button, a span is not necessary.

Instead of writing:

<element></element>

for most HTML elements you can simply close them with a trailing slash, like so:

<element />

Oh, and finally... a 'button' element has a refresh trigger within it, so I use an 'input type[button]' to avoid triggering the form.

Good Luck Programmers.

Due to StackOverflow's policy I had to change the domain in the example: https://meta.stackexchange.com/questions/208963/why-are-certain-example-urls-like-http-site-com-and-http-mysite-com-blocke

6

votes

<input type="button" onclick="window.open(); return false;" value="click me" />

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

5

votes

You can acheive this using window.open() method, passing _blank as one of the parameter. You can refer the below links which has more information on this.

http://www.w3schools.com/jsref/met_win_open.asp

http://msdn.microsoft.com/en-us/library/ms536651(v=vs.85).aspx

Hope this will help you.

4

votes

If you strictly want to stick to using button,Then simply create an open window function as follows:

    <script>
function myfunction() {
    window.open("mynewpage.html");
}
</script>

Then in your html do the following with your button:

Join

So you would have something like this:

 <body>
    <script>
function joinfunction() {
    window.open("mynewpage.html");
}
</script>
<button  onclick="myfunction()" type="button" class="btn btn-default subs-btn">Join</button>

Open button in new window?

5 Answers