Getting the current pathname from a iframe in js

Icey!
Sr. Member ⚓︎

Icey/Iceys

⛺︎ My Room

Getting the current pathname from a iframe in js

« on: May 07, 2024 @214.11 »

I have this piece of JS at the very end of the HTML <body> that look at an iframe for the current page it's on, I'm doing this as a way to tell the viewer what music is playing, however it seems that the pathname just returns "blank".

Code

var music_credits = document.getElementById("music-credits")
var mainframe = document.getElementById("mainframe")
var mf_page = mainframe.contentWindow.location.pathname

mainframe.addEventListener("load", function() {
  console.log(mf_page)
  if (mf_page.includes("home.html")) {
     music_credits.textContent = "Home (Slowed & Reverbed)"
  } else if (mf_page.includes("bulletin.html")) {
     music_credits.textContent = "kensune by nicopatty"
  } else if (mf_page.includes("me.html")) {
     music_credits.textContent = "Stickerbush Symphony"
  } else {
     music_credits.textContent = "null"
  }
});


	Logged

my beloved

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: Getting the current pathname from a iframe in js

« Reply #1 on: May 07, 2024 @415.64 »

I suspect it’s because you are getting your pathname before the iframe has actually loaded, you need to put the mf_page var inside the load event ^^


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Icey!
Sr. Member ⚓︎

Icey/Iceys

⛺︎ My Room

Re: Getting the current pathname from a iframe in js

« Reply #2 on: May 07, 2024 @704.84 »

Quote from: Melooon on May 07, 2024 @415.64

I suspect it’s because you are getting your pathname before the iframe has actually loaded, you need to put the mf_page var inside the load event ^^

This solved the problem!...

Although one thing that I will mention is that the js breaks when you try and run the site as a local file on your computer due to cross-origin restrictions. It also breaks your iframe link script as well, have you found a work around for that?


	Logged

my beloved

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: Getting the current pathname from a iframe in js

« Reply #3 on: May 07, 2024 @739.70 »

Quote from: Icey! on May 07, 2024 @704.84

It also breaks your iframe link script as well, have you found a workaround for that?

Yes, use a local web server when developing JS on your computer

Like Live Edit in VS Code or if you have Python installed (its preinstalled on macs and many linux distros) you can run this command to setup a webserver at your current directory:

Code

python3 -m http.server 8000

Then visit http://localhost:8000


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Icey!
Sr. Member ⚓︎

Icey/Iceys

⛺︎ My Room

Re: Getting the current pathname from a iframe in js

« Reply #4 on: May 07, 2024 @806.04 »

Quote from: Melooon on May 07, 2024 @739.70

Yes, use a local web server when developing JS on your computer Like Live Edit in VS Code or if you have Python installed (its preinstalled on macs and many linux distros) you can run this command to setup a webserver at your current directory:
Code
python3 -m http.server 8000
Then visit http://localhost:8000

I didn't know python could do that! Thanks for this!


	Logged

my beloved

Pages: [1]

« previous next »

Vaguely similar topics! (3)