javascript - How to open different domain or sub domain to new tab and same domain link to same tab - Stack Overflow

admin管理员组

文章数量:1427353

I need a way to get the link open in new tab if the link belongs to the different hostname or different sub domain. There is possibility that same site can be hosted with different domain or sub domain.
I don't have control over the html, as this is taken by some sort of bot, which I need to handle it.

Ex1. page request URL : example
have links:

<a href="//app.example">app example</a> 
<a href="//www.info.example">info example</a>
<a href=";>example abc</a>
<a href=";>example2</a>

I need it to resolve like

<a href="//app.example" target="_blank">app example</a> 
<a href="//info.example" target="_blank">info example</a>
<a href="; target="_self">example abc</a>
<a href="; target="_blank">example2</a>

---

Ex2. **page request URL: info.example**
have links:

<a href="//app.example">app example</a> 
<a href="//www.info.example">info example</a>
<a href=";>example abc</a>
<a href="https//dev.example2">example2</a>

I need it to resolve like

<a href="//app.example" target="_blank">app example</a> 
<a href="//wwww.info.example" target="_self">info abc</a>
<a href="; target="_blank">example abc</a>
<a href="https//dev.example2" target="_blank">example2</a>

I tried this as well Open all external links open in a new tab apart from a domain

but it does not work with the subdomain.

I need a way to get the link open in new tab if the link belongs to the different hostname or different sub domain. There is possibility that same site can be hosted with different domain or sub domain.
I don't have control over the html, as this is taken by some sort of bot, which I need to handle it.

Ex1. page request URL : example.
have links:

<a href="//app.example.">app example</a> 
<a href="//www.info.example.">info example</a>
<a href="https://example./abc">example abc</a>
<a href="https://www.example2.">example2</a>

I need it to resolve like

<a href="//app.example." target="_blank">app example</a> 
<a href="//info.example." target="_blank">info example</a>
<a href="https://example./abc" target="_self">example abc</a>
<a href="https://www.example2." target="_blank">example2</a>

---

Ex2. **page request URL: info.example.**
have links:

<a href="//app.example.">app example</a> 
<a href="//www.info.example.">info example</a>
<a href="http://tst.example./abc">example abc</a>
<a href="https//dev.example2.">example2</a>

I need it to resolve like

<a href="//app.example." target="_blank">app example</a> 
<a href="//wwww.info.example." target="_self">info abc</a>
<a href="http://tst.example./abc" target="_blank">example abc</a>
<a href="https//dev.example2." target="_blank">example2</a>

I tried this as well Open all external links open in a new tab apart from a domain

but it does not work with the subdomain.

• javascript
• jquery
• html
• anchor
• href

Share Improve this question Follow edited Jul 21, 2021 at 18:42 Ujjwal Jha asked Sep 24, 2018 at 12:30 Ujjwal JhaUjjwal Jha 7922 silver badges1313 bronze badges 2

• Can you share your updated js code? The question in the link provided does the opposite (but should work in your scenario) and the answer does something very different. – fdomn-m Commented Sep 24, 2018 at 12:34
• Hi, @freedomn-m I have updated my question it should clarify more now. – Ujjwal Jha Commented Sep 24, 2018 at 17:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Assuming you want to pare to current page and make any other sub-domain or main domain open in other tab you can do:

$('a').filter(function(){
    return this.host !=== location.host
}).attr('target','_blank');

An <a> element has many similar properties to location and host is one of them

You can use endswith instead of === when paring host with the anchor's host.

However, as pointed out in the ments, your rules between Ex1 and Ex2 do not match:

• ex1 uses an exact match on the hostname, ignoring any path (eg google. does not match info.google.)
• ex2 uses a hostname match, ignoring anything on the left (eg info.google. does match www.info.google.)

The snippet below uses the rules from the second example

var pagehost1 = "google."; // location.host;

$('.ex1 a').each(function(){
    if (this.host.endsWith(pagehost1)) {
        //$(this).attr('target','_blank');
        $(this).addClass("match");
    }
});

var pagehost2 = "info.google."; // location.host;

$('.ex2 a').each(function(){
    if (this.host.endsWith(pagehost2)) {
        //$(this).attr('target','_blank');
        $(this).addClass("match");
    }
});

.match { color: green; }
a { display:block; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='ex1'>
<a href="//app.google.">app google</a> 
<a href="//www.info.google.">info google</a>
<a href="https://google./abc">google abc</a>
<a href="https://www.apple.">apple</a>
</div>

<hr/>

<div class='ex2'>
<a href="//app.google.">app google</a> 
<a href="//www.info.google.">info google</a>
<a href="http://wwwtst.google./abc">google abc</a>
<a href="https//wwwdev.apple.">apple</a>
</div>

You mean something like this:

In this code ONLY google. will get _self, anything.google. and other sites will get _blank

That is including google.:8080 if you are on google.:80 -- so different ports also get _blank - if you wand different ports, same hose, then change to location.hostname

let currentHost = "google."; // location.host; // change in the real page
$(function() {
  $("a").each(function() {
    this.target=this.host===currentHost?"self":"_blank";
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://app.google.">app google</a><br/>
<a href="https://info.google.">info google</a> <br/>
**<a href="https://google./abc">google abc</a>**<br/>
<a href="https://google.:8080">other google port</a><br/>
<a href="https://apple.">apple</a><br/>

本文标签：