iframe navigation bar?

Icey!
Sr. Member ⚓︎

iframe navigation bar?

« on: August 12, 2023 @94.07 »

I recently got inspired to do more of a "melonking" inspired site with iframes as I think it would be fun. however, I am having trouble trying to create a navigation bar which is involving with trying to link something to the "main iframe". I am not the best with html and css but I will try to provide information.

I tried looking up how to set up changing the page for an iframe but I can't get it to work within another iframe. I am aware about "titling" iframes and using those to change the page of an iframe but I don't really know how to do that.

"main main" page code:

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The web site of icg</title>
    <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: black;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    iframe {
      border: none;
    }
    
    iframe[title="Main Frame"] {
      flex: 1;
      border-radius: 10px;
    }
    
    iframe[title="Navigation Bar"] {
      border-radius: 15px;
      border: 5px solid rgb(255, 255, 255);
    }
  </style>
  </head>
  <body>
  <div class="container">
    <iframe src="../index.html" name="main-frame" title="Main Frame"></iframe>
    <iframe src="../nav.html" height="200px" title="Navigation Bar"></iframe>
  </div>
  </body>
</html>

navigation bar code:

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      padding: 10px;
      font-family: "Open Sans", sans-serif;
      background: black;
      color: white;
    }
    .section {
      display: flex;
    }
    .icon {
      text-align: center;
      margin-right: 20px;
    }
    a {
      color: white;
      target: "main-frame";
    }
    a:hover {
      font-weight: bold;
    }
    .icon p {
      margin: 0;
    }
    .separator {
      margin-top: 20px;
      border: 0;
      height: 5px;
      background-color: white;
      border-radius: 10px;
    }
  </style>
  </head>
  <body>
    <div class="section">
      <div class="icon">
        <a href="../home.html"><img src="../images/icons/home.svg" height="64px"><p>Home</p></a>
      </div>
      <div class="icon">
        <a><img src="../images/icons/archive.svg" height="64px"><p>Attic</p></a>
      </div>
      <div class="icon">
        <a><img src="../images/icons/arrow-left-right.svg" height="64px"><p>Links</p></a>
      </div>
        <div class="icon">
        <a><img src="../images/icons/contacts.svg" height="64px"><p>About</p></a>
      </div>
      <div class="icon">
        <a><img src="../images/icons/chat.svg" height="64px"><p>Blurbss!</p></a>
      </div>
    </div>
    <div class="separator"></div>
      <p><img src="../images/logo.png" height="32px">Copyright ©2021 - 2023</p><p align="right">hi</p>
  </body>
</html>

if you wanna see the test page in it's current state you can see it here: icg.neocities.org/home


	Logged

my beloved

Cele
Sr. Member

any way the wind blows

Re: iframe navigation bar?

« Reply #1 on: August 12, 2023 @115.64 »

I think you need to mark the links like

Code

<a href="../home.html" target="_top"><img src="../images/icons/home.svg" height="64px"><p>Home</p></a>

Note the target top part within the a href.


	Logged

Kallistero
Jr. Member ⚓︎

SOON.

Re: iframe navigation bar?

« Reply #2 on: August 12, 2023 @127.30 »

My site is in an iframe, too!

If I wanted to do a cross-iframe navigation, what I would do is add a script onto the MAIN page (the one housing both of the iframes) that adds a 'message' event listener to the window (window.addEventListener('message', (event) => {do stuff}). Then, in that 'do stuff' function I would use the message event to figure out which iframe the message came from, and I would then change the 'src' attribute of the other iframe accordingly! You can also check which 'origin' the message came from (event.origin), so you can act accordingly to which URL the event came from.

Now, for the NAVIGATION frame, what you want to do is have it SEND a message to any parent site that might have it in an iframe. I use this bit of code to make a boolean that tells me if a page is in an iframe or not:

Code

let inFrame = true;
try {
    inFrame = (window.self !== window.top);
} catch (exception) {
    inFrame = true;
}

Once I have that info, I can use it to guard any instances of the magic function: window.top.postMessage(message, origin). As you might infer from the above code, window.top is the top-level window (the one that holds the iframes), and the message listener on the MAIN page is listening for exactly this postMessage function. You can put just about anything into the message argument, and it'll show up as 'event.data' in the event. As for the origin argument, I like to have the page generate it for me by creating a link and accessing its 'origin' attribute:

Code

var homePageLink = document.createElement('a');
homePageLink.href = './home/index.html';
var homePageOrigin = homePageLink.origin;

That should be everything you need to know to get the iframes changing each other's 'src' attributes.

Good luck!


« Last Edit: August 12, 2023 @133.61 by kallistero »	Logged

No pomegranates. If anyone messages me, and I found out they're a pomegranate, I will ask them to leave!

Icey!
Sr. Member ⚓︎

Re: iframe navigation bar?

« Reply #3 on: August 12, 2023 @245.35 »

Found a solution, all I had to do was add "target="main-frame"" to the buttons in the navigation bar.

this should look something like this:

Code

<a href="../ho.html" target="main-frame"><img src="../images/icons/home.svg" height="64px"><p>Home</p></a>

Now all I have to figure out is how to add info to the url bar when clicking the links.

edit: got linking thanks to https://forum.melonland.net/index.php?topic=115.0


« Last Edit: August 12, 2023 @251.19 by Icelogist »	Logged

my beloved

Kallistero
Jr. Member ⚓︎

SOON.

Re: iframe navigation bar?

« Reply #4 on: August 12, 2023 @251.75 »

Quote from: Icelogist on August 12, 2023 @245.35

Found a solution, all I had to do was add "target="main-frame"" to the buttons in the navigation bar.

this should look something like this:
Code
<a href="../ho.html" target="main-frame"><img src="../images/icons/home.svg" height="64px"><p>Home</p></a>
Now all I have to figure out is how to add info to the url bar when clicking the links.

window.history.replaceState('','','/my-page')

Edit: Oh, well, this is exactly what Melon's code is doing on line 61 of his script. Just for your own purpose here, you could probably do that specific thing in around 10 lines of code, but Melon's code is deployable & configurable for other people to use.