Skip to content
Externalize is a JavaScript solution (read: jQuery plugin) which unobtrusively adds external window creation to a bunch of links.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.travis.yml
LICENSE.md
README.md
bower.json
gulpfile.js
jquery.externalize.js
package-lock.json
package.json

README.md

Externalize Build Status Greenkeeper badge

Externalize is a jQuery plugin which unobtrusively adds external window creation to a bunch of links. It’s ridiculously small (< 1kB g’zipped).

Why?

In the past I used XHTML 1.0 Strict which prohibited the target attribute. Whenever I had a client who wanted to open some links in a new window, I told them this, and I really did not want to switch to ugly Transitional doctypes. But most of the time they insisted on new windows, so I created a solution written in JavaScript which eventually became the one in this repository.

Now everybody uses HTML5 which is fine. You may go and use target again.

I for myself use this as a playground for writing and maintaining jQuery plugins. :-)

Install

Using npm:

$ npm install jquery-externalize

Using yarn:

$ yarn add jquery-externalize

Using Bower (deprecated):

$ bower install jquery-externalize

Usage

Externalize is chainable and highly customizable (well, as customizable as it can get by now) by using these options:

  • name, sets the external window’s name (string, default: "external")
  • target, determines wether to use the target HTML attribute to support Firefox’s tab handling and Safari’s status bar info or not (boolean, default: true)
  • classes, applies CSS classes to an external link (string, default: "")
  • relation, applies a relationship to an external link (string, default: "external")
  • title, sets the text added as or appended to the title attribute to inform the user about an upcoming new window (string, default: "Opens in a new window")

Examples

The most common use case would be:

<p><a href="https://example.com/" title="example.com">Go to example site</a>

<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.externalize.js"></script>
<script>
	$('a[href*="//"]').externalize();
</script>

As a result we get a link that makes use of HTML5’s external relationship attribute and which features a descriptive title attribute in English and a plain old target attribute to open up a new window:

<p><a href="https://example.com/" rel="external" title="example.com (Opens in a new window)" target="external">Go to example site</a></p>

Another use case: Opening PDF files in a new window.

<p><a href="/download/sample.pdf">Download PDF</a>

<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.externalize.js"></script>
<script>
	$('a[href$=".pdf"]').externalize({
		target: false
	});
</script>

This becomes a link with an onClick event to open a new window:

<p><a href="/download/sample.pdf" rel="external" title="Opens in a new window">Download PDF</a></p>

License

MIT © Marc Görtz

You can’t perform that action at this time.