CODEWITHSUNDEEP
javascripthtmlhyperlink
Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

Is there a way to open all <a href> links on a page in new windows?

I have a bunch of <a href=".html"> links and want to make them all open in new windows.

I know I can do a search and replace all to add target="_blank" to all my <a href="..."> links.

However, is there a quick way, such as setting a CSS style, or adding some JavaScript code, to accomplish the same thing?

Upvotes: 52

Views: 42497

Answers (6)

Praveen Kumar
Praveen Kumar

Reputation: 959

I've used pure vanilla JavaScript to create a script that makes all the links open in a new window.

<script  type="text/javascript">
    var all_links = document.querySelectorAll("a");

    for (let index in all_links) {
        try {
            all_links[index].setAttribute("target", "_blank");
        }
        catch (error) {
            //console.log(error);
        }
    }
</script>

Upvotes: 1

MJ Walsh
MJ Walsh

Reputation: 653

Just add a html base element to the page using Javascript:

var e = document.createElement("base");
e.target = "_blank";
document.head.appendChild(e);

Upvotes: 1

Scott
Scott

Reputation: 21511

If you have jQuery it's simple

$("a").attr("target", "_blank");

Or regular Javascript

var links = document.links;
for (var i = 0; i < links.length; i++) {
     links[i].target = "_blank";
}

As per @Lekensteyn's suggestion, without Javascript (added for Completeness)

<base target="_blank">.

Upvotes: 39

Rob W
Rob W

Reputation: 349142

CSS: No.
JavaScript: Delegate a click event, which adds a target="_blank" attribute on click of a link.

document.body.addEventListener(function(e) {
    if (e.target.nodeName.toUpperCase() === 'A' && e.target.href) {
        e.target.target = '_blank';
    }
}, true);

Note: If the <a> element contains other elements, you might want to traverse the tree to find out whether an anchor element is clicked:

document.body.addEventListener(function(e) {
    var target = e.target;
    do {
        if (target.nodeName.toUpperCase() === 'A' && target.href) {
            target.target = '_blank';
            break;
        }
    } while (target = target.parentElement);
}, true);

Or, if you're a jQuery-lover:

$('body').on('click', 'a', function(e) {
    e.target.target = '_blank';
});

Upvotes: 16

RippeR
RippeR

Reputation: 1472

yep, u can add attribute with JS to all links in HTML document named 'target' with value '_blank' ;)

You could also open replace href's of all links from url to javascript:openInWindow(url) using this, and writing function in JS that opens new window and set's it's location to url ;) Google will help you with both.

Upvotes: 1

Lekensteyn
Lekensteyn

Reputation: 66465

If you have a page consisting of only links, consider <base target="_blank">. This opens every link in a new window (but also includes the targets of forms, unless overridden with <form target="_self">.

As others have shown, without modifying the HTML source, you can use Javascript to iterate through all <a> tags and add the target attribute or add an event listener that sets the target attribute dynamically.

Upvotes: 59

Related Questions