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.
Install the plugin using pip from PyPI:
pip install mkdocs-open-in-new-tabAdd the plugin to your mkdocs.yml:
plugins:
- search
- open-in-new-tabLink 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).
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();
})
}This project is licensed under the terms of the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent