Open external links and files in new window

Add the following JS snippet to open external links and files* in a new window. It also adds classes to Phone, PDF and E-mail links for easier use in CSS. Add to the bottom of the body. Can be included via Elementor Custom Code.

				
					/**
 * External Links
 */
( function( $ ) {
	/*
	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. */
	$( 'a' ).each( function() {
		/* Validate that the HREF is a valid URL. */
		var href = $( this ).attr( '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' );
		}
	} );

	/* Check all forms in the page to add the _blank target when applies. */
	$( 'form' ).each( function() {
		/* Validate that the HREF is a valid URL. */
		var action = $( this ).attr( '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^="mailto:" i]').addClass( 'emailLink' );
	$( 'a[href^="tel:" i]').addClass( 'phoneLink' );
} )( jQuery );

				
			

Just for documentation / historical purpouses, we used to use the following code (but some issues were found with subdomains and if the links had or not www).

				
					/**
 * External Links
 */
( function( $ ) {
	/** Open external links and files with extensions .pdf, .doc, .docx, .mp3, .m4a, and .wav in a new window. */
	var h = window.location.host.toLowerCase();
	$(
		"a[href^='http']:not([href*='" + h + "' i]), "
		+ "form[action^='http']:not([action*='" + h + "' i]), "
		+ "a[href$='.doc' i], "
		+ "a[href$='.docx' i], "
		+ "a[href$='.m4a' i], "
		+ "a[href$='.mp3' i], "
		+ "a[href$='.pdf' i], "
		+ "a[href$='.wav' i]"
	).attr( 'target', '_blank' );

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

* List of file extensions:

  • .pdf
  • .doc
  • .docx
  • .mp3
  • .m4a
  • .wav

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.