jQuery Plugin To Set Rel And Target Attributes For Links - Externalize

Externalize is a lightweight jQuery plugin that dynamically sets the Name, Relation, Target, and Title attributes for links within the document. A typical use case for this plugin is to open the external link in a new window, with the rel="external" attribute.

Installation:

# Yarn
yarn add jquery-externalize

# NPM
$ npm install jquery-externalize

How to use it:

1. Load both jQuery library and the Externalize plugin's script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.externalize.js"></script>

2. Initialize the plugin on the links and done.  The plugin will open the links in a new window and Add a short description to the link’s title attribute.

$('.ref a').externalize();

3. This will convert the a link:

<a href="https://www.jqueryscript.net/">Vestibulum dui diam</a>

4. Into...

<a href="https://www.jqueryscript.net/" rel="external" title="Opens in a new window" target="external">Vestibulum dui diam</a>

5. Default configuration options.

$('.ref a').externalize({

  // (string) name of the external window
  name:     "_blank", 

  // (bool) use the "target" HTML attribute to support Firefox tab handling and Safari status bar info
  target:   true, 

  // (string) apply CSS classes to an external link
  classes:  "", 

  // (string) apply a relationship to an external link
  relation: "external", 

  // (string) text added as or appended to the "title" attribute to inform the user about an upcoming new window
  title:    "Opens in a new window" 

});

Changelog:

2021-05-15

• Use target="_blank" by default.

2017-07-31

• JS update

---

This awesome jQuery plugin is developed by mrcgrtz. For more Advanced Usages, please check the demo page or visit the official website.