Created
November 28, 2025 09:41
-
-
Save Dan-Q/287f49915bbd66baa48ce3dad95589fc to your computer and use it in GitHub Desktop.
Frameset with Self-Correcting Anchor Link Tracking, based on Melon Link, for kro
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Blog</title> | |
| </head> | |
| <body> | |
| <h1>Blog</h1> | |
| <h2>Table of contents</h2> | |
| <ul> | |
| <li><a href="#post-1">Post One</a></li> | |
| <li><a href="#post-2">Post Two</a></li> | |
| <li><a href="#post-3">Post Three</a></li> | |
| <li><a href="#post-4">Post Four</a></li> | |
| <li><a href="#post-5">Post Five</a></li> | |
| <li><a href="#post-6">Post Six</a></li> | |
| <li><a href="#post-7">Post Seven</a></li> | |
| <li><a href="#post-8">Post Eight</a></li> | |
| <li><a href="#post-9">Post Nine</a></li> | |
| </ul> | |
| <article id="post-1"> | |
| <h2>Post One</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-2"> | |
| <h2>Post Two</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-3"> | |
| <h2>Post Three</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-4"> | |
| <h2>Post Four</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-5"> | |
| <h2>Post Five</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-6"> | |
| <h2>Post Six</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-7"> | |
| <h2>Post Seven</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-8"> | |
| <h2>Post Eight</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <article id="post-9"> | |
| <h2>Post Nine</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| </p> | |
| </article> | |
| <script src="melon-link-helper.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Home</title> | |
| </head> | |
| <body> | |
| <h1>Home page</h1> | |
| <p> | |
| Go read <a href="blog.html" target="main">my blog</a>. | |
| </p> | |
| <p> | |
| I recommend <a href="blog.html#post-3">Post Three</a> to learn more about me! | |
| </p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <!-- Frame sites look better when zoomed out on mobile, so 0.4 is a zoomed out scale --> | |
| <meta name="viewport" content="width=device-width, initial-scale=0.4" /> | |
| <title>My K00l Frame Site</title> | |
| <script src="melon-link.js"></script> | |
| <script> | |
| titlePrefix = "k00l Site - "; | |
| //-- Extra Options -- | |
| //updateTitle = false; //if you want to disable title updating. (Default is true) | |
| //pageParam = "z"; //if you want to change the url path of your pages. (Default is z) | |
| </script> | |
| </head> | |
| <!-- Adds a navbar on the left side of 100px width, the navbar cannot resize or scroll! --> | |
| <!-- create a nav.html to populate your navbar and a home.html with your main page! --> | |
| <!-- HINT, change cols to rows to put your navbar at the top! --> | |
| <!-- HINT, change cols="150,*" to cols="*,150" to put the navbar on the right! --> | |
| <frameset cols="150,*" frameborder="1"> | |
| <frame name="nav" src="nav.html" noresize scrolling="no" /> | |
| <frame id="mainframe" name="main" src="home.html" /> | |
| </frameset> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Load this script inside main frame pages that contain anchor links, e.g. | |
| // <script src="melon-link-helper.js"></script> | |
| // It'll help (Dan Q's enhanced version of) melon-link.js (loaded by the frameset) to update the URL | |
| async function updateHistory() { | |
| const title = top.titlePrefix + document.title; | |
| const url = "?" + top.pageParam + "=" + document.location.pathname + "&" + top.anchorParam + "=" + document.location.hash.substring(1); | |
| if(top.location.href === url) return; // Don't update the URL if it's not changed | |
| top.history.replaceState({}, title, url); | |
| } | |
| // On page load, update the history: | |
| updateHistory(); | |
| // On internal navigation, update the history: | |
| window.addEventListener("hashchange", updateHistory, false); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Melo-tech Frame Link Management System, Dan Q Edition, 3.3.0 | |
| // This script updates the URL on each page, allowing you to share and bookmark frameset and iFrame links! | |
| // Feel free to steal this code! | |
| // (Dan Q stole it and added functionality for anchor linking!) | |
| // Get help here - https://forum.melonking.net/index.php?topic=115 | |
| // oO How to use this code Oo | |
| // 1. Add '<script src="frame-link.js"></script>' to your <head>. | |
| // 2. Add 'id="mainframe"' to your main iFrame or Frame window. | |
| // Optional: Create a second <script></script> section AFTER you link the frame-link.js | |
| // Optional: add 'updateTitle = false;' if you want to disable title updating. (Default is true) | |
| // Optional: add 'titlePrefix = "My Site ";' if you want to add a prefix to your titles. (Default is none) | |
| // Optional: add 'pageParam = "z";' if you want to change the url path of your pages. (Default is z) | |
| // Optional: if you use a hitCounter like GoatCounter add 'hitCounterFunction = function () { XXX MY HIT COUNTER CODE }', this function will automaticly be called each time someone click a page, so you can log per page hits within your frame. | |
| // See https://melonking.net/melon.html for a working example! GOOD LUCK! | |
| var mainFrame; | |
| var firstLoad = true; | |
| var updateTitle = true; | |
| var pageParam = "z"; | |
| var anchorParam = 'y'; | |
| var titlePrefix = ""; | |
| var hitCounterFunction = undefined; | |
| //Event to handle first page load - Also sets up the mainFrame | |
| window.addEventListener("DOMContentLoaded", (e) => { | |
| mainFrame = document.getElementById("mainframe"); | |
| mainFrame.addEventListener("load", updateHistory, false); | |
| setMainFrame(); | |
| }); | |
| //Event to handle back button presses | |
| window.addEventListener("popstate", function (e) { | |
| if (e.state !== null) { | |
| setMainFrame(); | |
| } | |
| }); | |
| //Checks to see if a page parameter exists and sets the mainframe src to that page. | |
| function setMainFrame() { | |
| let params = new URLSearchParams(window.location.search); | |
| let page = params.get(pageParam); | |
| let anchor = params.get(anchorParam); | |
| if (page != null) { | |
| page = page.replace("javascript:", ""); // Security to stop url scripts | |
| mainFrame.src = page + '#' + anchor; | |
| } | |
| } | |
| //Updates the browser history with the current page, causing the URL bar to update. | |
| async function updateHistory() { | |
| let title = titlePrefix + mainFrame.contentDocument.title; | |
| // Stops the page getting into an infinate loop reloading itself. | |
| if (firstLoad) { | |
| firstLoad = false; | |
| if (updateTitle) { | |
| document.title = title; | |
| } | |
| if (hitCounterFunction != undefined) { | |
| hitCounterFunction(); | |
| } | |
| return; | |
| } | |
| history.replaceState({}, title, "?" + pageParam + "=" + mainFrame.contentWindow.location.pathname); | |
| if (updateTitle) { | |
| document.title = title; | |
| } | |
| //Save a hit - Optionally run this if a hit counter has been defined. | |
| if (hitCounterFunction != undefined) { | |
| hitCounterFunction(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment