jQuery Open All Hyperlinks in New Window

JavaScript code snippets to to customise your hyperlinks with CSS using jQuery to make them stand out. Also a tip to open hyperlinks in a new window using jQuery.

Open hyperlinks in new window

//open all hyperlinks in a new window using jQuery
$('a[href^="http://"]')
  .attr("target", "_blank");
  $(this).attr('href', newHref).attr("target", "_blank");

You can even add an image or text to your hyperlink with a little bit of chaining. This example adds [^] to the end of your link text.

Custom style external hyperlinks

//open all hyperlinks in a new window using jQuery
//also append a "^" to every link that is external (contains "http://")
$('a[href^="http://"]')
  .attr({
    target: "_blank", 
    title: "Opens in a new window"
  })
  .append(' [^]');

Next, add a little bit of jQuery:

$(document).ready(function() {
    $("a[@rel='external']").addClass("external").
       .click(function() { window.open($(this).href); return false; });
});

This finds all anchor tags with rel=”external” and causes them to open a new window when clicked. The “return false;” prevents the current page from switching to the URL as well. As an added benefit, these links get the CSS class “external” so they can be styled, perhaps with something like:

Add background image to external hyperlinks

//change background image of external hyperlinks
A.external {
  padding-left: 15px;
  background: url(external-link.png) top left no-repeat;
}

Frequently Asked Questions (FAQs) about jQuery and Hyperlinks

How can I use jQuery to open a hyperlink in a new window?

To open a hyperlink in a new window using jQuery, you can use the window.open() method. This method creates a new window and loads the document specified by the given URL. Here’s a simple example:

$("a").click(function(event) {
event.preventDefault();
window.open(this.href, "_blank");
});
In this code, $("a") selects all hyperlinks on the page. The click() method attaches an event handler function to these hyperlinks. When a hyperlink is clicked, the function is executed. The event.preventDefault() method prevents the default action of the event (which is to open the hyperlink in the same window). Finally, window.open(this.href, "_blank") opens the hyperlink in a new window.

Can I use jQuery to open a URL in a new tab instead of a new window?

Yes, you can use jQuery to open a URL in a new tab instead of a new window. The window.open() method can be used for this purpose. The second parameter of this method specifies the target where the URL should be opened. If you set this parameter to “_blank”, the URL will be opened in a new tab. Here’s an example:

$("a").click(function(event) {
event.preventDefault();
window.open(this.href, "_blank");
});
In this code, $("a") selects all hyperlinks on the page. The click() method attaches an event handler function to these hyperlinks. When a hyperlink is clicked, the function is executed. The event.preventDefault() method prevents the default action of the event (which is to open the hyperlink in the same window). Finally, window.open(this.href, "_blank") opens the hyperlink in a new tab.

How can I use jQuery to open a specific URL in a new window?

To open a specific URL in a new window using jQuery, you can use the window.open() method. You need to specify the URL as the first parameter of this method. Here’s an example:

$("#myButton").click(function() {
window.open("https://www.example.com", "_blank");
});
In this code, $("#myButton") selects a button with the id “myButton”. The click() method attaches an event handler function to this button. When the button is clicked, the function is executed. Finally, window.open("https://www.example.com", "_blank") opens the specified URL in a new window.

Can I use jQuery to open a URL in a new window with specific dimensions?

Yes, you can use jQuery to open a URL in a new window with specific dimensions. The window.open() method can be used for this purpose. The third parameter of this method is a string that specifies the features of the new window. You can specify the width and height of the new window in this string. Here’s an example:

$("#myButton").click(function() {
window.open("https://www.example.com", "_blank", "width=500,height=600");
});
In this code, $("#myButton") selects a button with the id “myButton”. The click() method attaches an event handler function to this button. When the button is clicked, the function is executed. Finally, window.open("https://www.example.com", "_blank", "width=500,height=600") opens the specified URL in a new window with a width of 500 pixels and a height of 600 pixels.

How can I use jQuery to open a URL in a new window without the browser’s navigation bar?

To open a URL in a new window without the browser’s navigation bar using jQuery, you can use the window.open() method. The third parameter of this method is a string that specifies the features of the new window. You can set the “location” feature to “no” to hide the navigation bar. Here’s an example:

$("#myButton").click(function() {
window.open("https://www.example.com", "_blank", "location=no");
});
In this code, $("#myButton") selects a button with the id “myButton”. The click() method attaches an event handler function to this button. When the button is clicked, the function is executed. Finally, window.open("https://www.example.com", "_blank", "location=no") opens the specified URL in a new window without the navigation bar.