Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/JakubAndrysek/mkdocs-open-in-new-tab

🔮 This plugin adds JS to open outgoing links and PDFs in a new tab.
https://github.com/JakubAndrysek/mkdocs-open-in-new-tab

js markdown mkdocs new-tab new-tab-page plugin pypi-package python

Last synced: 3 months ago
JSON representation

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

Lists

README 

        
# 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](https://newtab.kubaandrysek.cz/).



## Installation



Install the plugin using pip from [PyPI](https://pypi.org/project/mkdocs-open-in-new-tab/):



```bash

pip install mkdocs-open-in-new-tab

```



## Usage



Add the plugin to your `mkdocs.yml`:



```yaml

plugins:

  - search

  - open-in-new-tab

```



## Testing

Link to [Google](https://google.com) and [GitHub](https://github.com).

Both should links should open in a new tab.



Relative link to [Relative link](./docs/RelativeLink.md) should open in the same tab.



Sample PDF link to [PDF](./docs/assets/sample.pdf) should open in a new tab (pdf from [here](https://www.africau.edu/images/default/sample.pdf)).



# 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 `` section of the page as a `` 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.



<details><summary>Show source code</summary>

<p>



Look at this source <a href="https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/blob/main/open_in_new_tab/js/open_in_new_tab.js">open_in_new_tab.js</a>:



```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();

    })

}

```

</p>

</details>



<!-- ## Known issues

This extension does not work with mkdocs-material [navigation.instant](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#instant-loading). JS could not be loaded when the page is loaded instantly. If you know how to fix it, please let me know. Issue is [here](https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/2). -->



## License



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