{"id":325,"date":"2025-02-08T03:23:52","date_gmt":"2025-02-08T03:23:52","guid":{"rendered":"https:\/\/jackharvest.com\/?p=325"},"modified":"2025-02-25T01:25:43","modified_gmt":"2025-02-25T01:25:43","slug":"how-to-have-hosted-wiki-js-site-open-hyperlinks-and-urls-in-new-tabs","status":"publish","type":"post","link":"https:\/\/jackharvest.com\/index.php\/2025\/02\/08\/how-to-have-hosted-wiki-js-site-open-hyperlinks-and-urls-in-new-tabs\/","title":{"rendered":"How to have hosted wiki.js site open hyperlinks and urls in new tabs."},"content":{"rendered":"\n<p>Its simple (well, to implement anyway):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Theme\n<ul class=\"wp-block-list\">\n<li>Head HTML Injection\n<ul class=\"wp-block-list\">\n<li>Add this script:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const observer = new MutationObserver(() => {\n      const links = document.querySelectorAll('a');\n      const currentDomain = window.location.hostname;\n\n      links.forEach(link => {\n        const linkHost = new URL(link.href).hostname;\n        if (linkHost !== currentDomain &amp;&amp; link.hostname !== \"\") {\n          link.setAttribute('target', '_blank');\n          link.setAttribute('rel', 'noopener noreferrer');\n        }\n      });\n    });\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    });\n  });\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>You probably <em>almost<\/em> implemented something similar. The issue here though, is wiki.js requires this to be implemented in a slightly different way. The javascript snip above does the following:<\/p>\n\n\n\n<p>Ensures that links to other websites open in a new tab and are secure. In short:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Page Load:<\/strong> Waits until the webpage loads.<\/li>\n\n\n\n<li><strong>Observer:<\/strong> <span style=\"text-decoration: underline;\">Sets up a watcher to monitor webpage changes<\/span>.<\/li>\n\n\n\n<li><strong>Find &amp; Check Links:<\/strong> Locates all links and checks if they go to a different website.<\/li>\n\n\n\n<li><strong>Update Links:<\/strong> If the link is external, it opens in a new tab with added security.<\/li>\n\n\n\n<li><strong>Keep Watching:<\/strong> Continues monitoring for new links and repeats the process.<\/li>\n<\/ol>\n\n\n\n<p>The reason for the mutationobserver is because some of the links may not be <em>loaded<\/em> yet at the time of page render; This code will detect the changes <em>as they happen<\/em> and respond accordingly without having to constantly check the entire DOM manually.<\/p>\n\n\n\n<p>Enjoy! <\/p>\n\n\n\n<p>[Here&#8217;s what it looks like in action]:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"697\" height=\"728\" src=\"https:\/\/jackharvest.com\/wp-content\/uploads\/2025\/02\/image.png\" alt=\"\" class=\"wp-image-328\" srcset=\"https:\/\/jackharvest.com\/wp-content\/uploads\/2025\/02\/image.png 697w, https:\/\/jackharvest.com\/wp-content\/uploads\/2025\/02\/image-287x300.png 287w\" sizes=\"auto, (max-width: 697px) 100vw, 697px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Its simple (well, to implement anyway): You probably almost implemented something similar. The issue here though, is wiki.js requires this to be implemented in a slightly different way. The javascript snip above does the following: Ensures that links to other websites open in a new tab and are secure. In short: The reason for the&hellip;&nbsp;<a href=\"https:\/\/jackharvest.com\/index.php\/2025\/02\/08\/how-to-have-hosted-wiki-js-site-open-hyperlinks-and-urls-in-new-tabs\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to have hosted wiki.js site open hyperlinks and urls in new tabs.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":419,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-325","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"jetpack_featured_media_url":"https:\/\/jackharvest.com\/wp-content\/uploads\/2025\/02\/image-2.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/posts\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":1,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"predecessor-version":[{"id":329,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/posts\/325\/revisions\/329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/media\/419"}],"wp:attachment":[{"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jackharvest.com\/index.php\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}