GUIDE: How to fix links on a frame site! - MK Frame-Link System - page 2 - ♺ ∙ Web Crafting Materials

kro
Newbie ⚓︎

⛺︎ My Room

Artifacts:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #15 on: November 28, 2025 @218.61 »

i'm currently using this for my site and it works wonders, thanks so much for this

i do want to ask if there's any way to link to bookmarks though?? i have a lot of blog entries all on one page, because i write short entries, and often at that, so i can't really see myself breaking all of them into their separate pages. even though they might be short, sometimes i find myself wanting to link to a previous entry, so it'd really help if i could somehow link to an id in a page

or if there are any alternatives anyone could recommend, i'd be so grateful!!


	Logged

Dan Q
Sr. Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #16 on: November 28, 2025 @328.70 »

Quote from: kro on November 28, 2025 @218.61

i do want to ask if there's any way to link to bookmarks though?

This can definitely be done with a few minor tweaks, by adding a second parameter to frame-link.js (you'll need a copy hosted on your own site instead of hotlinking Meloon's, of course.

Here's my modified version (search for 'anchor' to see the three lines I added):

Code

// Melo-tech Frame Link Management System 3.2.1
// This script updates the URL on each page, allowing you to share and bookmark frameset and iFrame links!
// Feel free to steal this code!
// Get help here - https://forum.melonking.net/index.php?topic=115

// oO How to use this code Oo
// 1. Add '<script src="https://melonking.net/scripts/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();
    }
}

With this script, just tweak the URL so it has both a ?z= (page URL) AND &y= (anchor within the main frame) parameter.

I've got to run, but reply if that's unclear!


	Logged

Artifact Swap:

kro
Newbie ⚓︎

⛺︎ My Room

Artifacts:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #17 on: November 28, 2025 @416.67 »

@Dan Q thank you so much, it works perfectly!

just a minor thing - i noticed it doesn't update the url in the navigation bar like the original script does

if it's not too much i'd really appreciate if you could show me how to get that to work with the bookmarks too!


	Logged

Dan Q
Sr. Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #18 on: November 28, 2025 @428.98 »

Ah! So you don't just want to be able to deep-link to a blog post, you'd also like it, upon navigating to a blog post, to update the address bar.

That one's tougher. The only way to get to the blog posts page involves reloading that frame, which can be detected by the frameset. But getting to a particular blog post could happen from a link within the blog posts page, which puts it out-of-reach of the frameset, I imagine (I haven't tried, but there's a reasonable chance that frameset destination scoping prevents it).

If so: you could work around it by modifying links so they directly change the _top, e.g.:

Code

<a href="#post-123">Link to Blog Post 123 from within the blogs.html</a>                 <!--- 😟 don't do this --->
<a href="blog.html#post-123" target="main">Link to Blog Post 123 from anywhere</a>       <!--- 😟 don't do this --->

<a href="/?z=blog.html&y=post-123" target="_top">Link to Blog Post 123 from anywhere</a> <!-- 🚀 do this instead! -->

That seems like a lot of work to me, and results in a full frameset reload for each affected navigation. It might be the only way to achieve what you're looking for, though,. off the top of my head.


	Logged

Artifact Swap:

Dan Q
Sr. Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #19 on: November 28, 2025 @446.00 »

I've thought about it a little more, and there is a way to achieve what you're looking for!

I created a new script, melon-link-helper.js, and I include it from any "main page" that contains anchor links, e.g. I'd edit blog.html and add <script src="melon-link-helper.js"></script>.

That melon-link-helper.js looks like this:

Code

// 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 updateFramesetHistory() {
    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:
updateFramesetHistory();

// On internal navigation, update the history:
window.addEventListener("hashchange", updateFramesetHistory, false);

A full copy of my working test code can be found at https://gist.github.com/Dan-Q/287f49915bbd66baa48ce3dad95589fc

(Right now my code adds occasional ugly &y=null params to the URL. It's harmless, but not pretty, and you might like to add a condition to updateFramesetHistory to prevent it if it bugs you.)


	Logged

Artifact Swap:

kro
Newbie ⚓︎

⛺︎ My Room

Artifacts:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #20 on: November 28, 2025 @629.92 »

@Dan Q the first method you mentioned without the script seems to work just fine for me!

i've also tried to use the script on my main page, but the url bar updates with ?z= to the main page itself, resulting in a sort of recursive effect. the url bar also doesn't update with &y= when i click on ids within the blog pages. i wonder if maybe there's something different to how my site is set up that causes this? i use iframes instead of framesets, if that's of any relevance.

anyhow, thank you for taking the time with this!


	Logged

Dan Q
Sr. Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Re: GUIDE: How to fix links on a frame site! - MK Frame-Link System

« Reply #21 on: November 28, 2025 @649.06 »

Hmm; I don't know what's up there I'm afraid.

Here's what I'd suggest: download the ZIP file of my example, extract it into a folder, put that folder temporarily on your website. Visit the index.html page. See if it works for you.

If so, let's try to adapt it until it's closer to your situation. Swap the frameset in the index for two iframes, perhaps, and see if that "break" my example. If so, we know it's something special about iframes. If my example still works with iframes... then it's gotta be something else...

Just thinking: a little debugging to help us narrow down what's wrong!


	Logged

Artifact Swap:

Pages: 1 [2]

« previous next »