Skip to main content

MkDocs plugin to open outgoing links and PDFs in new tab.

Project description

MkDocs - Open in a new tab plugin

This plugin adds JS code to open outgoing links and PDFs in a new tab.

The automatic opening of links in a new tab is a common feature of modern websites. It is also a good practice for accessibility. However, it is not a default behavior of Markdown. This plugin adds a JavaScript code to your website that opens external links and PDFs in a new tab.

Look at the demo.

Installation

Install the plugin using pip from PyPI:

pip install mkdocs-open-in-new-tab

Usage

Add the plugin to your mkdocs.yml:

plugins:
  - search
  - open-in-new-tab

Testing

Link to Google and GitHub. Both should links should open in a new tab.

Relative link to Relative link should open in the same tab.

Sample PDF link to PDF should open in a new tab (pdf from here).

How does it work?

The plugin adds a JavaScript code to your website that opens external links and PDFs in a new tab. Injection of the code is done using the on_page_context hook. The code is injected into the <head> section of the page as a <script> dependency of the open_in_new_tab.js file. The code is automatically added to all pages of your website.

The function external_new_window checks if the link is external using the hostname property of the a element. If the link is external, the target attribute is set to _blank and the rel attribute is set to noopener. The noopener attribute is used to prevent the new tab from accessing the window.opener property and ensures that the original page will not be able to access the new tab.

The same way is used to open PDF links in a new tab.

Show source code

Look at this source open_in_new_tab.js:

// Description: Open external links in a new tab and PDF links in a new tab
// Source: https://jekyllcodex.org/without-plugin/new-window-fix/

//open external links in a new window
function external_new_window() {
    for(let c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
        let b = c[a];
        if(b.getAttribute("href") && b.hostname !== location.hostname) {
            b.target = "_blank";
            b.rel = "noopener";
        }
    }
}
//open PDF links in a new window
function pdf_new_window ()
{
    if (!document.getElementsByTagName) {
      return false;
    }
    let links = document.getElementsByTagName("a");
    for (let eleLink=0; eleLink < links.length; eleLink ++) {
    if ((links[eleLink].href.indexOf('.pdf') !== -1)||(links[eleLink].href.indexOf('.doc') !== -1)||(links[eleLink].href.indexOf('.docx') !== -1)) {
        links[eleLink].onclick =
        function() {
            window.open(this.href);
            return false;
        }
    }
    }
}

function apply_rules() {
    external_new_window();
    pdf_new_window();
}

if (typeof document$ !== "undefined") {
    // compatibility with mkdocs-material's instant loading feature
    // based on code from https://github.com/timvink/mkdocs-charts-plugin
    // Copyright (c) 2021 Tim Vink - MIT License
    // fixes [Issue #2](https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/2)
    document$.subscribe(function() {
        apply_rules();
    })
}

License

This project is licensed under the terms of the MIT license.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

mkdocs-open-in-new-tab-1.0.3.tar.gz (4.9 kB view details)

Uploaded Source

Built Distribution

mkdocs_open_in_new_tab-1.0.3-py3-none-any.whl (6.7 kB view details)

Uploaded Python 3

File details

Details for the file mkdocs-open-in-new-tab-1.0.3.tar.gz.

File metadata

File hashes

Hashes for mkdocs-open-in-new-tab-1.0.3.tar.gz
Algorithm Hash digest
SHA256 a40231901b12f01a1d4b798112712d475741356e550d8f3adf3ca23e332a7d2c
MD5 cc4e3a2a27b0b936991783180c403ede
BLAKE2b-256 20d71cfc6341e606493d476c2821ad151f77db6b10e89c60878e344a8af87a82

See more details on using hashes here.

File details

Details for the file mkdocs_open_in_new_tab-1.0.3-py3-none-any.whl.

File metadata

File hashes

Hashes for mkdocs_open_in_new_tab-1.0.3-py3-none-any.whl
Algorithm Hash digest
SHA256 e2ddfa02f53d7c16d8430f5c0b3d98c4b98c82e1b8aa6fbdc91c78e89bbeb5f1
MD5 4903641b290c301592cd6eaeef54a87f
BLAKE2b-256 69a5265c57ed951caa0c09d776d82363e840b8d5a04157a8240f8b2f590ec847

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page