[solved] External links, set default target as "_blank"

[laurin1]

Works in IE and Chrome:

  function fixExternalLinks() {
    var nodes = document.querySelectorAll('.wikiexternallink a');
    for(var i=0; i< nodes.length; i++){
      var link = nodes[i];
      if (link.hasAttribute('target') == false)  {
        link.setAttribute('target', '_blank');
      }
    }
  }
  document.addEventListener("DOMContentLoaded", fixExternalLinks);

[pdwalker]

Thanks.

I would have gotten to it eventually, but this just save me a whole lot of time.

And since you mentioned it, I’ll reexamine edge to see how well it behaves in our environment.

[helge]

I just tried to reproduce the solution in the current version of xwiki. Unfortunately, (parts of ?) the code is just shown at the top of the wiki and does not solve the problem anymore

browser is firefox (newest) and chrome (newest)

[pdwalker]

You’ll have to be more specific about what you actually did so we can figure out where it is going wrong for you.

The above solution continues to work for me.

Specifically, I implemented the following under Administration, Look & Feel, Presentation, HTTP Meta Info:

<script>
  function fixExternalLinks() {
    document.querySelectorAll('.wikiexternallink a').forEach(function(link) { 
      if (link.hasAttribute('target') == false)  {
        link.setAttribute('target', '_blank');
      }
    })
  }
  document.addEventListener("DOMContentLoaded", fixExternalLinks);
</script>

Basically, the javascript code code executes once the page is loaded, looks for any external links and if they do not already have a target specified, gives it a _blank target.

[pdwalker]

I’m embarrassed to say that I never got back to this since the javascript injection was working so well.

[helge]

bam, sorry. I don’t know what was happening but I tried it again and now it is working like a charm. Thanks you!

[andi]

we just set up a wiki and using your solution. it works very good - thank you! we made an app as a database with infos about locations and their websites. on pages the code works perfect but on the app page - the overview with all entries it doesn’t work. the class on both pages are the same but i have no idea why it’s not working there. may i ask you if you know why and if you have a solution?

[pdwalker]

Hi Andi

I think this is what the problem is:

The javascript code I loaded depends on knowing when the page is loaded and then the code looks through the links on the page and changes the target for the external links. Notice I said “external links”. I identify the external links by the css css selector “.wikiexternallink a” which means look for the wikiexternallink class, then the A target.

You can see this if you inspect element on your web page

However, as you said, the wiki external links inside the application do not get modified.

I’m guessing that the reason for this is, that the links inside the application are generated/created after the DOMContentLoaded event has already happened so the links don’t get the target modification.

How can you test this? After your application, put in a single external link anywhere on that page that is outside of the application provided links and see if that link has the “target” value assigned to it.

If that works, then that proves to me what the problem is.

If this turns out to be the problem, how do you fix it? At this point, I have no idea. I’ll have to play with my instance and see if I can work out an answer.

[andi]

First thank you so much for answering so fast in this old thread. yes, its like you said. i created an external testlink and it opens in a new tab so i think the table is loaded after DOM … as you said. if you or someone will find a solution some time it would be super helpful. i’m not a coder - i can read and understand some code but i can not write it.

[pdwalker]

I had a look and I realize that it is going to take a better understanding than I currently have of customizing xwiki to make this happen.

[andi]

Thank you very much for taking the time. Yes, it is a difficult task. We’re not getting anywhere either.

I hope we get the feature target blank in the WYSIWYG editor when you build a link sometime in the future. That would be a solution to write the attribute directly to the link. But no matter how I try it, the attribute doesn’t work. If I try it directly in the editor, I can even see the attribute in the table next to the link, but without a function as plain text.

If we do get the problem solved, I will post the solution here.