Manual:Opening external links in a new window

From MediaWiki.org

Jump to: navigation, search

Contents

[edit] How to open a link in a new window in Strict HTML 4

Re: Opening a link in a new window...

> Therefore how, in Strict HTML 4.01, do you target a link to a new
> window?

The short answer is:  you don't.

The long answer is [...]

Think long and hard before deciding on opening any links in new windows. Users of most browsers are able to open new windows where they deem useful, but forcing links to open in the same window is difficult.

  • On Spawned Windows
  • Guideline 10. Use interim solutions. Checkpoint 10.1
    Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
  • The Top Ten New Mistakes of Web Design (2. Opening New Browser Windows)
    Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet.

[edit] How to make external links open in a new window

Find this function in 'YourWikifolder\includes\Skin.php' and change to:

function bottomScripts() {
		global $wgJsMimeType;
		return "\n\t\t<script type=\"$wgJsMimeType\">if (window.runOnloadHook) runOnloadHook();</script>\n"
		." <script type='text/javascript' src='../javascript_form/getXterlinks.js'></script>\n"
		." <script type='text/javascript'>getXterlinks()</script>\n";
                }

Then create a folder and a file in 'YourWikifolder/javascript_form/getXterlinks.js', and copy and paste this into the file then save it (don't forget to set the right value for "YourdomainWithoutHttp"):

function getXterlinks()
// By Thong Nguyen nkthong@yahoo.com
// This code just VIRTUALLY add a target="_Blank" to any external link in the wiki document!
// NOTE: YOU DON"T Need to modify any of your text document!
{
	var Xterlinks = document.getElementsByTagName('A');
	for (var i=0;i<Xterlinks.length;i++)
	{ 
		var eachLink = Xterlinks[i];
		var regexp_isYourdomain="YourdomainWithoutHttp"; //for example "meta.wikimedia"
		var regexp_ishttp=/(http(.)*:\/\/)/;
		//Check if the link is valid and is external link
		if( (eachLink.href != null) && (eachLink.href.match(regexp_isYourdomain) == null) && eachLink.href.match(regexp_ishttp)!=null )
	  	{
  			eachLink.target ="_blank";//make the target for this external link
	  	}
	}
}

MediaWiki versions Tested in 1.9.3

Or you can follow ANOTHER METHOD below.

This page describes how to change the MediaWiki code so that external links open in a new window.

Keep in mind that some consider it rude to force new windows on your users. Additionally, if you are using Google AdSense (or similar services) on your wiki, these links should open within the same browser ("_self) according to the policies of the Ad Service.

[edit] Customized skin and script

This method keeps the markup more compliant by avoiding the target attribute. Use a script to redirect all the links on a page instead.

  • Open the .js page corresponding to the skin. (For the Monobook skin, type MediaWiki:Monobook.js in the Search box.)
  • Create a function that parses all elements for anchor tags with a specific rel (relation) attribute, such as external or nofollow.
externalLinks = function() {
	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") != null && 
				(anchor.getAttribute("rel").indexOf("external") >= 0 ||
					anchor.getAttribute("rel").indexOf("nofollow") >= 0)
			) {
			anchor.target = "_blank";
		}
	}
}
  • Attach the function as a load event (compatible with Firefox and IE).
if (window.addEventListener) {
	window.addEventListener("load", externalLinks, false);
}
else if (window.attachEvent) {
	window.attachEvent("onload", externalLinks);
}

[edit] Version < 1.5.x (? I think ?)

  1. Open Includes/Skin.php or Includes/Linker.php
  2. Find "function getExternalLinkAttributes"
  3. Replace 
    $r .= " title=\"{$link}\"";
    with 
    $r .= " title=\"{$link}\" target=\"_blank\"";
  4. If you wish, you can do the same for the function getInterwikiLinkAttributes. This will make interwiki links open in a new window.

Note: It doesn't change already present links to open in new windows. It will only make new links you insert open in new windows. Or you can alter all the pages that have external links and then save it to make them work.

Note 2: This doesn't work for the Sidebar on v 1.5.

[edit] Version > 1.5.0

  1. Open includes/Linker.php
  2. Find "function getExternalLinkAttributes"
  3. After 
    $r = ($class != '') ? " class='$class'" : " class='external'";
    insert the following code 
    $r .= " target=\"_blank\"";

This works for all external links and is used by the wiki for the next page generation of each page. The only thing you will have to do if you have a page which still has no "new" links is clear your cache.

Confirmed works in 1.6.x

Confirmed works in 1.8.2

Confirmed works in 1.9.0, but only on newly created external links. You need to make a none-edit and save old pages again.

Confirmed works in 1.11 ( new pages )


Note:

In the version 1.9.0; the line of code has "\" and not "'"

$r = ($class != '') ? " class=\"$class\"" : " class=\"external\"";

[edit] Dynamically defining an href target

I didn't want to change the behavior in a static way, but sometimes wanted to define an alternate target. To open a link in a new window, one should be able to define target='_new' or target='_blank'. The following changes allow doing so.

[edit] PHP changes

Open includes/Linker.php

1. function getExternalLinkAttributes

find the function getExternalLinkAttributes

        function getExternalLinkAttributes( $link, $text, $class='' ) {
                $link = htmlspecialchars( $link );
 
                $r = ($class != '') ? " class='$class'" : " class='external'";
 
                $r .= " title=\"{$link}\"";
                return $r;
        }

change it to

        function getExternalLinkAttributes( $link, $text, $class='' ) {
                $targ = "";
                $pos  = strpos( $link, '|' );
                if ( $pos !== false ) {
                        $targ = " target='" . substr ( $link, $pos + 1 ) . "'";
                        $link = substr ( $link, 0, $pos );
                }
 
                $link = htmlspecialchars( $link );
 
                $r = ($class != '') ? " class='$class'" : " class='external'";
 
                $r .= $targ . " title=\"{$link}\"";
                return $r;
        }

2. function makeExternalLink

find the function makeExternalLink

        function makeExternalLink( $url, $text, $escape = true, $linktype = '' ) {
                $style = $this->getExternalLinkAttributes( $url, $text, 'external ' . $linktype );
                global $wgNoFollowLinks;
                if( $wgNoFollowLinks ) {
                        $style .= ' rel="nofollow"';
                }
                $url = htmlspecialchars( $url );
                if( $escape ) {
                        $text = htmlspecialchars( $text );
                }
                return '<a href="'.$url.'"'.$style.'>'.$text.'</a>';
        }

change it to

        function makeExternalLink( $url, $text, $escape = true, $linktype = '' ) {
                $style = $this->getExternalLinkAttributes( $url, $text, 'external ' . $linktype );
                global $wgNoFollowLinks;
                if( $wgNoFollowLinks ) {
                        $style .= ' rel="nofollow"';
                }
                $pos = strpos( $url, '|' );
                if ( $pos !== false ) {
                        $url = substr ( $url, 0, $pos );
                }
                $url = htmlspecialchars( $url );
                if( $escape ) {
                        $text = htmlspecialchars( $text );
                }
                return '<a href="'.$url.'"'.$style.'>'.$text.'</a>';
        }

[edit] Usage

  • Default behavior hasn't changed. Thus the following link should still open in the same window:
[http://en.wikipedia.org/wiki/Main_Page Wikipedia main page]
  • To open the same link in a new window, add _new or _blank to the link, separated from the link by a pipe:
[http://en.wikipedia.org/wiki/Main_Page|_new Wikipedia main page in new window]
  • Inside of a table, the pipe symbol must be put into a nowiki-tag:
[http://www.wikipedia.org<nowiki>|</nowiki>_new]
NOTE: MediaWiki 1.10.1 this nor the one below works inside Tables. It prints |_new on every link

[edit] MediaWiki versions

Tested in 1.6.6

Tested in 1.8.3

Tested in 1.10.0

Tested in 1.11.2

[edit] Dynamically adding any href attributes

I did't want to change the behavior in a static way, but wanted to add the possibility of adding attributes to the href tag for external links.

If one wants to open a certain link in a new window, he probably wants to add an attribute target='_new' to the href tag. The following changes allow doing so.

Warning Warning: If your wiki is open to the public, this might be dangerous since one could also execute javascript code by adding event listener attributes.

[edit] PHP changes

Open includes/Linker.php

1. function getExternalLinkAttributes

find the function getExternalLinkAttributes

        function getExternalLinkAttributes( $link, $text, $class='' ) {
                $link = htmlspecialchars( $link );
 
                $r = ($class != '') ? " class='$class'" : " class='external'";
 
                $r .= " title=\"{$link}\"";
                return $r;
        }

change it to

        function getExternalLinkAttributes( $link, $text, $class='' ) {
#begin edit
                $atts = "";
                $pos = strpos( $link, '|' );
                if ( $pos !== false ) {
                        $text = substr ( $link, $pos + 1 );
                        $link = substr ( $link, 0, $pos );
                        $pos  = strpos ($text, '|' );
                        while ( $pos !== false ) {
                                $atts .= " " . substr( $text, 0, $pos );
                                $text = substr ( $text, $pos + 1 );
                                $pos  = strpos ($text, '|' );
                        }
                        $atts .= " " . $text;
                }
 #end edit
                $link = htmlspecialchars( $link );
 
                $r = ($class != '') ? " class='$class'" : " class='external'";
 #begin edit
                $r .= $atts;
 #end edit
                $r .= " title=\"{$link}\"";
                return $r;
        }

2. function makeExternalLink

find the function makeExternalLink

        function makeExternalLink( $url, $text, $escape = true, $linktype = '' ) {
                $style = $this->getExternalLinkAttributes( $url, $text, 'external ' . $linktype );
                global $wgNoFollowLinks;
                if( $wgNoFollowLinks ) {
                        $style .= ' rel="nofollow"';
                }
                $url = htmlspecialchars( $url );
                if( $escape ) {
                        $text = htmlspecialchars( $text );
                }
                return '<a href="'.$url.'"'.$style.'>'.$text.'</a>';
        }

change it to

        function makeExternalLink( $url, $text, $escape = true, $linktype = '' ) {
                $style = $this->getExternalLinkAttributes( $url, $text, 'external ' . $linktype );
                global $wgNoFollowLinks;
                if( $wgNoFollowLinks ) {
                        $style .= ' rel="nofollow"';
                }
#begin edit
                $pos = strpos( $url, '|' );
                if ( $pos !== false ) {
                        $url = substr ( $url, 0, $pos );
                }
#end edit
                $url = htmlspecialchars( $url );
                if( $escape ) {
                        $text = htmlspecialchars( $text );
                }
                return '<a href="'.$url.'"'.$style.'>'.$text.'</a>';
        }

[edit] Usage

  • Default behavior hasn't changed. Thus the following link should still open in the same window:
[http://en.wikipedia.org/wiki/Main_Page Wikipedia main page]
  • To open the same link in a new window, add target='_new' to the link, separator is a pipe:
[http://en.wikipedia.org/wiki/Main_Page|target='_new' Wikipedia main page in new window]
  • Multiple attributes can be added, separated by pipes:
[http://en.wikipedia.org/wiki/Main_Page|target='_new'|style='font-weight:bold;' Wikipedia main page in new window]
  • Inside of a table, the pipe symbol must be put into a nowiki-tag:
[http://www.wikipedia.org<nowiki>|</nowiki>target='_new']
NOTE: MediaWiki 1.10.1 this does not work inside Tables. It prints |target='_new' on every link

[edit] Notes

  • Use single quotes, not double quotes
  • Inside of a table, the pipe symbol must be put into a nowiki-tag: [http://www.wikipedia.org<nowiki>|</nowiki>target='_new']
  • Warning Warning: If your wiki is open to the public, this might be dangerous since one could also execute javascript code by adding event listener attributes.

[edit] MediaWiki versions

Tested in 1.6.6

The problem stated above is still occurring in version 1.11.0 of mediaWiki. Using <nowiki>|</nowiki>target='_new' results in the page displaying |target='_new' instead of the text intended. For example, entering:

|'''Yahoo Messenger:''' [http://messenger.yahoo.com/edit/send/?.target=asa.rand<nowiki>|</nowiki>target='_new' asa.rand]

displays:

|target='_new' asa.rand

[edit] External links in new window except for links to same server

I applied the suggest change to function getExternalLinkAttributes in Linker.php. All external links open in a new window. OK but when you go to page that doesn't exist, there is link to edit it, which is an external link.

So, I patched function getExternalLinkAttributes to open in new window ONLY if the link points to another server. If it's on same server, the link is normal and opens in the same window.

Before changes

function getExternalLinkAttributes( $link, $text, $class='' ) {
	$link = htmlspecialchars( $link );
 
	$r = ($class != '') ? " class=\"$class\"" : " class=\"external\"";
 
	$r .= " title=\"{$link}\"";
	return $r;
}

After changes

function getExternalLinkAttributes( $link, $text, $class='' ) {
	$link = htmlspecialchars( $link );
 
	//HACK : http://www.mediawiki.org/wiki/Manual:Opening_external_links_in_a_new_window
	$r = '';
	$sameServer = strpos($link, $_SERVER['SERVER_NAME']) !== false;
	if (!$sameServer) {
		$r .= ($class != '') ? " class=\"$class\"" : " class=\"external\"";
		$r .= " target=\"_blank\"";
	}
 
	$r .= " title=\"{$link}\"";
	return $r;
}

Works with MediaWiki 1.12.

[edit] External links in new window except for links to the same server (for v1.13)

Update to above patch, to make it compatible with MediaWiki version 1.13. Cause function getExternalLinkAttributes doesn't receive link parameter anymore, I make changes in function makeExternalLink in Linker.php.

Before changes

	/** @todo document */
	function makeExternalLink( $url, $text, $escape = true, $linktype = '', $ns = null ) {
		$style = $this->getExternalLinkAttributes( $url, $text, 'external ' . $linktype );
		global $wgNoFollowLinks, $wgNoFollowNsExceptions;
		if( $wgNoFollowLinks && !(isset($ns) && in_array($ns, $wgNoFollowNsExceptions)) ) {
			$style .= ' rel="nofollow"';
		}
		$url = htmlspecialchars( $url );
		if( $escape ) {
			$text = htmlspecialchars( $text );
		}
		$link = '';
		$success = wfRunHooks('LinkerMakeExternalLink', array( &$url, &$text, &$link ) );
		if(!$success) {
			wfDebug("Hook LinkerMakeExternalLink changed the output of link with url {$url} and text {$text} to {$link}", true);
			return $link;
		}
		return '<a href="'.$url.'"'.$style.'>'.$text.'</a>';
	}

After changes

	/** @todo document */
	function makeExternalLink( $url, $text, $escape = true, $linktype = '', $ns = null ) {
		$style = $this->getExternalLinkAttributes( $url, $text, 'external ' . $linktype );
		global $wgNoFollowLinks, $wgNoFollowNsExceptions;
		if( $wgNoFollowLinks && !(isset($ns) && in_array($ns, $wgNoFollowNsExceptions)) ) {
			$style .= ' rel="nofollow"';
		}
		$url = htmlspecialchars( $url );
		if( $escape ) {
			$text = htmlspecialchars( $text );
		}
		$link = '';
		$success = wfRunHooks('LinkerMakeExternalLink', array( &$url, &$text, &$link ) );
		if(!$success) {
			wfDebug("Hook LinkerMakeExternalLink changed the output of link with url {$url} and text {$text} to {$link}", true);
			return $link;
		}
		// Begin new window hack
		if (!strpos($url, $_SERVER['SERVER_NAME'])) {
			$style .= ' target="_blank"';
		}
		// End new window hack
		return '<a href="'.$url.'"'.$style.'>'.$text.'</a>';
	}

Works with MediaWiki 1.13.

[edit] External links in new window except for links to the same server (for v1.14)

See Manual:$wgExternalLinkTarget.

Retrieved from "http://www.mediawiki.org/wiki/Manual:Opening_external_links_in_a_new_window"
Personal tools