Miscellaneous
How do I make external links open in a new window in a standards compliant way?
Scenario:
"I would like to have all external links open in a new window. The problem is using target="_blank" causes my site to not validate. Is there another way?"
Solution:
We'll be using the method outlined at SitePoint.com. You will need to modify the /nucleus/javascript/edit.js file and your skin.
Original forum threads (thanks, SitePoint.com & Legolas!):
http://forum.nucleuscms.org/viewtopic.php?t=9253
http://forum.nucleuscms.org/viewtopic.php?t=10967
Method:
First, find the following line of code in the file located at /nucleus/javascript/edit.js:
var textpre = "<a href=\"" + strHref.replace(/&/g,'&') + "\">";
and replace it with
var textpre = "<a href=\"" + strHref.replace(/&/g,'&') + "\" rel=\"external\">";
Next, copy and save the following code into a text editor and save the file as "external.js":
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;
You will need to upload external.js to your server. You can upload it to whereever you want as long as you specify the path correctly when you call the script from the
section.In our example, we will be uploading external.js to the folder of the skin we are using, and so we'lll put the following code in the <head> section of your skin:
<!-- Open links with rel="external" in a new window --> <script type="text/javascript" src="<%skinfile(external.js)%>"></script>
If you have uploaded your skin elsewhere you will need to change the path accordingly.
e.g. http://yourdomain.com/external.js
<!-- Open links with rel="external" in a new window --> <script tyle="text/javascript" src="http://yourdomain.com/external.js"></script>
e.g. http://yourdomain.com/directory/external.js
<!-- Open links with rel="external" in a new window --> <script tyle="text/javascript" src="http://yourdomain.com/directory/external.js"></script>
Finally, you will need to tag all links you want to open in a new window with rel="external". So for example, here is a standard link to the Nucleus CMS homepage:
<a href="http://nucleuscms.org/">
To get this link to open in a new window, you need to add rel="external" to the end:
<a href="http://nucleuscms.org/" rel="external">
Further enhancement:
If you are using more than one argument in your rel attribute (e.g. rel="external nofollow"), just add the following code to the end of external.js:
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("rel")) {
var rel = anchor.getAttribute("rel");
var external = false;
if (rel.indexOf(" ") > 0) {
while (rel.indexOf(" ") > 0 && external == false) {
if (rel.substr(0, rel.indexOf(" ")) == "external") {
external = true;
}
rel = rel.substr(rel.indexOf(" ") + 1, rel.length - rel.indexOf(" ") + 1);
}
}
if (rel == "external") {
external = true;
}
if (anchor.getAttribute("href") && external == true) {
anchor.target = "_blank";
}
}
}
return;
}
Total votes: 12 - Rating: 7.50