Open external links and files in a new window (or tab)

Table of Contents

Add the following code to your javascript file to force all the external links in a site to open in a new window (or tab, depending on the user’s browser configuration).

The code also adds classes to Phone, PDF and E-mail links for easier use in CSS (for example, to add icons before or after the link).

Ninja Tables #

The previous script won’t work with Ninja Tables because it’s executed before the Ninja Tables DOM is generated. In case you need to add external links to Ninja Tables, you can use the following script (may need some editions, but we decided to stop the task until a new case comes up):

				
					/**
 * External Links
 *
 * @version 1.0.3-custom
 */
( function( $ ) {
	let externalLinks = function( event, $scope = $( 'body' ) ) {
		/*
		Get the current page host:
		- in lowercase for easier comparisons.
		- without www. (in case it has it) because we will add it on another variable.
		*/
		var host = window.location.host.toLowerCase().replace(/^www\./i, '');

		/* Get the current page host with www. */
		var host_www = 'www.' + host;

		/* List of file extensions that we want to open on new tabs. */
		var extensions = [
			'doc',
			'docx',
			'm4a',
			'mp3',
			'pdf',
			'wav',
		];

		function isValidURL( urlString ) {
			try {
				new URL( urlString );
				return true;
			} catch ( error ) {
				return false;
			}
		}

		/* Check all links in the page to add the _blank target when applies. */
		$scope.find( 'a' ).each( function() {
			/* Validate that the HREF exists. */
			var href = $( this ).attr( 'href' );
			if ( ! href ) {
				return true;
			}

			/** Validate that the HREF is not javascript code */
			if ( href.toLowerCase().startsWith( 'javascript:' ) ) {
				return true;
			}

			/* Validate that the HREF is a valid URL. */
			href = href.toLowerCase();
			if ( ! isValidURL( href ) ) {
				return true;
			}

			var url = new URL( href );
			var extension = url.pathname.split( '.' ).pop();

			/*
			Add the _blank target parameter to the link if:
				A) the link host is not the same than the site host without www or with www.
				OR
				B) the extension of the link is included on the list of extensions.
			*/
			if (
				( url.host != host && url.host != host_www )
				|| extensions.includes( extension )
			) {
				$( this ).attr( 'target', '_blank' ).attr( 'rel', 'noopener' );
			}

			/**
			 * Add the .externalLink class to external links,
			 */
			if (
				( url.host != host && url.host != host_www )
			) {
				$( this ).addClass( 'externalLink' );
			}
		} );

		/* Check all forms in the page to add the _blank target when applies. */
		$scope.find( 'form' ).each( function() {
			/* Validate that the ACTION exists. */
			var action = $( this ).attr( 'action' );
			if ( ! action ) {
				return true;
			}

			/* Validate that the ACTION is a valid URL. */
			action = action.toLowerCase();
			if ( ! isValidURL( action ) ) {
				return true;
			}

			var url = new URL( action );

			/*
			Add the _blank target parameter to the link if the link host
			is not the same than the site host without www or with www.
			*/
			if ( url.host != host && url.host != host_www ) {
				$( this ).attr( 'target', '_blank' );
			}
		} );

		/* Add classes to PDF, E-mail and Phone links for easier use. */
		$( 'a[href$=".pdf" i]' ).addClass( 'pdfLink' );
		$( 'a[href$=".docx" i]' ).addClass( 'docLink' );
		$( 'a[href$=".doc" i]' ).addClass( 'docLink' );
		$( 'a[href^="mailto:" i]').addClass( 'emailLink' );
		$( 'a[href^="tel:" i]').addClass( 'phoneLink' );
	};

	$( window ).on( 'elementor/frontend/init', externalLinks );
	$( window ).on( 'ninja_table_loaded_once', function( event ) {
		externalLinks( event, $( event.target ) );
	} );
} )( jQuery );
				
			

Powered by BetterDocs

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.