make link open in new tab/window

**jonas-e** · Oct 15, 2007, 09:36

According to Kevin Yanks, it should be possible to make external links open in a new tab/window by using this method (and keep it xhtml strict validated):
http://www.sitepoint.com/article/sta...pliant-world/3

Code:

function externalLinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++) {
      var anchor = anchors[i];
      if (anchor.getAttribute("href") &&
        anchor.getAttribute("rel") == "external")
        anchor.target = "_blank";
  }
}
window.onload = externalLinks;

And the following in the head tag:

Code:

<script type="text/javascript" src="/external.js">
</script>

It makes perfect sense. But it doesn't work. I copied the example above 100% and put in my website www.skred-svalbard.no. The links the the new attribute continue to open in the same window/tab.

Any ideas?
Am I doing something wrong?

PS: I abbreviated rel="external" to rel="ext". When it didn't work, I changed the " "s to ' 's in the javascript.

**jimfraser** · Oct 15, 2007, 10:19

Your onload function is getting overwritten by google maps.

**ParkinT** · Oct 15, 2007, 10:21

Where is the window.onload statement?
I suspect it is not being called.

**jonas-e** · Oct 15, 2007, 10:47

ParkinT: The "window.onload = externalLinks;" is there, isnt it?

jimfraser:
You are right - on the other pages without the map, it works!
I don't understand why google maps overwrites it? I load the script and I execute it long before the maps-scripts.
I also tried to execute the function the same way the BrowserCheck() function is executed below - no effect.

Any suggestions?

Code:

<script type="text/javascript" src="inc/BrowserCheck.js">
</script>
<script type="text/javascript" src="inc/ExternalLinks.js">
</script>

</head>

<body>

<div id='browalert'></div>
<div id='wrapper'>

<script type="text/javascript">
BrowserCheck();
</script>

**jimfraser** · Oct 15, 2007, 10:57

Well, you're defining window.onload and then later on google maps redefines it, so as with any coding the last value to which you set a variable is the one that sticks around.

Best way would be to redefine it again, that way you won't have to mess around with google maps js files (which you might upgrade/change/etc).

Due to the fact that your JS files are scattered throughout the html, put this near the end of your html (before </body> closing tag):

Code:

<script type="text/javascript">
window.onload = function () {
  externalLinks();  // your function
  init();  // google maps init function
}
</script>

**jonas-e** · Oct 15, 2007, 11:37

Thanks - makes good sense. Will try that tomorrow. It's 21:37 here ...

**jonas-e** · Oct 16, 2007, 00:02

Thanks jimfraser, that did the trick!

Although, it doesn't work for the links in the inc/map_data.php file - links that occur in the white info-bubbles when you click the markers in the map. I would like them to open in a new tab using the rel='ext', but they won't. Not even when I make the externalLinks() function run AFTER the init() and after importing inc/map_data.php.

Code:

<script type="text/javascript">
window.onload = function () {
	init();  // from map_functions.js
	externalLinks();  // from ExternalLinks.js
}
</script>

Will the externalLinks() function only work on real HTML, not on DOM mark-up in javascripts?

The SitePoint Forums have moved.

User Tag List

Thread: make link open in new tab/window

Thread Tools

Display

make link open in new tab/window

thanks - but ..

Bookmarks

Bookmarks

Posting Permissions