Moodle

JavaScript for setting target=XX on links based on a CSS class

Details

  • Type: Sub-task Sub-task
  • Status: Closed Closed
  • Priority: Minor Minor
  • Resolution: Fixed
  • Affects Version/s: 2.0
  • Fix Version/s: 2.0
  • Component/s: Accessibility
  • Labels:
    None
  • Affected Branches:
    MOODLE_20_STABLE
  • Fixed Branches:
    MOODLE_20_STABLE

Description

So we can get the effect of target="_blank" without invalid HTML.

http://dialnet.unirioja.es/js/procesarLinks.js may have useful inspiration.

Issue Links

Activity

Hide
Caio SBA added a comment -

Yes, you can do that. In my opinion, the best way is to add a 'rel="external"' attribute to the link tag. And you can achieve the effect of target="_blank" with the following Javascript function:

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;

We can modify the function to set other values to the target attribute, mapping the "rel" value with the "target" one:

function externalLinks() {
var map = { "external" : "_blank", "same" : "_self" }
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 = map[anchor.getAttribute("rel")]; }
}
}
window.onload = externalLinks;

If you don't want to use the target anyway, it's possible to use window.open instead:

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" ) { window.open(anchor.getAttribute("href")); }
}
}
window.onload = externalLinks;

Hope it helps!

Show
Caio SBA added a comment - Yes, you can do that. In my opinion, the best way is to add a 'rel="external"' attribute to the link tag. And you can achieve the effect of target="_blank" with the following Javascript function: 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; We can modify the function to set other values to the target attribute, mapping the "rel" value with the "target" one: function externalLinks() { var map = { "external" : "_blank", "same" : "_self" } 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 = map[anchor.getAttribute("rel")]; } } } window.onload = externalLinks; If you don't want to use the target anyway, it's possible to use window.open instead: 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" ) { window.open(anchor.getAttribute("href")); } } } window.onload = externalLinks; Hope it helps!
Hide
David Horat added a comment -

Caio´s idea is much more semantically correct.

Show
David Horat added a comment - Caio´s idea is much more semantically correct.
Hide
Tim Hunt added a comment -

Actually, that is not true. The goal is not to open all external links in a new window. This is intended for things like help buttons, that need to pop up a window. rel="XXX" may be an appropriate way to do that, but I cannot immediately think of a semantically valid rel value that covers all cases.

Still, an interesting idea. Thanks for suggesting it.

Show
Tim Hunt added a comment - Actually, that is not true. The goal is not to open all external links in a new window. This is intended for things like help buttons, that need to pop up a window. rel="XXX" may be an appropriate way to do that, but I cannot immediately think of a semantically valid rel value that covers all cases. Still, an interesting idea. Thanks for suggesting it.
Hide
David Horat added a comment -

You can specify for example: 'rel="help"' and all the ones with help will be opened in a new window. Because it is a link which has a help relationship with the page which contains the link.

Show
David Horat added a comment - You can specify for example: 'rel="help"' and all the ones with help will be opened in a new window. Because it is a link which has a help relationship with the page which contains the link.
Hide
Caio SBA added a comment -

David, you took the words right out of my mouth! The idea is exactly this.
Isn't it enought, Tim?

Show
Caio SBA added a comment - David, you took the words right out of my mouth! The idea is exactly this. Isn't it enought, Tim?
Hide
Tim Hunt added a comment -

No. That deals with help files, which is just one case. What about all the others? I can think of at least half a dozen different types, and that is just off the top of my head.

In Moodle, most of these links are produced from a link_to_popup_window function, which does not know why it is being called.

Show
Tim Hunt added a comment - No. That deals with help files, which is just one case. What about all the others? I can think of at least half a dozen different types, and that is just off the top of my head. In Moodle, most of these links are produced from a link_to_popup_window function, which does not know why it is being called.
Hide
David Horat added a comment -

Then, if we want to make Moodle more semantically accurate we will need to know why it is being called.

For every call to the function "link_to_popup_window", we would have to categorize that link adding a "rel" parameter. Make a list of categories. And make them all use this new method.

Show
David Horat added a comment - Then, if we want to make Moodle more semantically accurate we will need to know why it is being called. For every call to the function "link_to_popup_window", we would have to categorize that link adding a "rel" parameter. Make a list of categories. And make them all use this new method.
Hide
Caio SBA added a comment -

Yes, we could modify the "link_to_popup_window" function to add a "rel" parameter to the link according to its behaviour. Each value of the "rel" parameter would perform some action, and we can treat this in the Javascript.

Show
Caio SBA added a comment - Yes, we could modify the "link_to_popup_window" function to add a "rel" parameter to the link according to its behaviour. Each value of the "rel" parameter would perform some action, and we can treat this in the Javascript.
Hide
Dan Poltawski added a comment -

Just to point to a discussion I started about the related problem:
http://moodle.org/mod/forum/discuss.php?d=75515

Show
Dan Poltawski added a comment - Just to point to a discussion I started about the related problem: http://moodle.org/mod/forum/discuss.php?d=75515
Hide
Sam Hemelryk added a comment -

This has been since resolved as part of the deprecation of the `link_to_popup_window` function.
You can now create a new popup_action and using OUTPUT->link to display it. This will automatically attach JS events to display the href in a popup.

Show
Sam Hemelryk added a comment - This has been since resolved as part of the deprecation of the `link_to_popup_window` function. You can now create a new popup_action and using OUTPUT->link to display it. This will automatically attach JS events to display the href in a popup.

People

Vote (0)
Watch (5)

Dates

  • Created:
    Updated:
    Resolved: