jQuery Plugin To Open External Links In A New Window / Tab - exLink

File Size: 11.6 KB
Views Total: 830
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Open External Links In A New Window / Tab - exLink

exLink is a simle, heavily customizable jQuery plugin which allows to open external links of your webpage in a new window (or new tab) with a confirmation dialog which verifies whether the user really wants to go to the external site before directing.

Key Features:

  • Custom protocol filters: http, https, ftp, ftps, etc.
  • Custom file type filters: pdf, doc, xls, etc.
  • Auto add 'rel=nofollow' attribute to external links.
  • Custom confirm dialog styles & text.
  • Callback functions.

Basic usage:

1. To get started you first need to include the exLink jQuery plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.exLink.js"></script>

2. Then include the jquery.exLink.css in the head section for default confirm dialog styles.

<link href="jquery.exLink.css" rel="stylesheet">

3. Call the function and you're done.

$.fn.exLink();

4. Config the plugin.

// Specify specific protocols you would like to catch. 
protocols: ['http', 'https'],

// Specify specific file types you would like to catch. 
filetypes: ['pdf', 'xls', 'docx', 'doc', 'ppt', 'pptx'],

// Identify external links based on a hostname comparison
hostCompare: false,

// Add nofollow attribute to external links
noFollow: false,

// Enables pages to still use the popular Fancy Box plugin to open content in modal dialogs without opening in a new tab as well.
// Requires fancybox jQuery plugin
fancyBoxIgnore: true,

// Execute a function each time an external link has been clicked
linkCallback: null,

// Execute a function each time a document link has been clicked
fileCallback: null,

// Enables a Google Analytics event to trigger when any of the links are clicked
gaTracking: false,

// Customize the event label
gaTrackLabel: 'External Links',

// Use the classic version of Google Analytcis
gaTrackOld: false,

// Display a confirm dialog
linkWarning: true,

// Warning text
linkWarningBody: 'You are about to leave this website and navigate to the link below. Would you like to continue?',

// File type warning
fileWarning: true,

// Warning text
fileWarningBody: 'You are about to open the file below. Do you wish to continue?',

// Customize confirm dialog
dialogConfirm: '#006600',
dialogCancel: '#CC0000',
dialogConfirmText: '#fff',
dialogCancelText: '#fff',
dialogCancelButton: 'Cancel',
dialogConfirmButton: 'Continue',
modalDisplayBG: true,
modalWidth: "320px",
modalHeight: "240px",

// Change the color of all external links identified
externalColor: '',

// Change the color of all document links identified.
documentColor: '',

// Change the color of all external and document links that have been clicked. 
clickedColor: '',

// forces all external links and documents to open in a new window
newWindow: false,

// The width of the new window
widthWindow: "500",

// The height of the new window
heightWindow: "400;",

// The title of the window
titleWindow: 'My Window Title'

Change log:

2015-11-21

  • Deprecated exLink.init("re")

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