Getting the current pathname from a iframe in js - ☔︎ ∙ I need Help!

Memory
Guest

Getting the current pathname from a iframe in js

« on: a Spring night »

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

Melooon
Hero Member ⚓︎

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

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: Getting the current pathname from a iframe in js

« Reply #1 on: a Spring day »

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

Artifact Swap:

Memory
Guest

Re: Getting the current pathname from a iframe in js

« Reply #2 on: a Spring day »

Quote from: Melooon on a Spring day

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

Melooon
Hero Member ⚓︎

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

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: Getting the current pathname from a iframe in js

« Reply #3 on: a Spring day »

Quote from: Memory on a Spring day

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

Artifact Swap:

Memory
Guest

Re: Getting the current pathname from a iframe in js

« Reply #4 on: a Spring night »

Quote from: Melooon on a Spring day

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

Pages: [1]

« previous next »