How to call a function from a (external) page that loads in an (internal) iframe

Using JavaScript with Hype
1

Hey all, I’ve done a bunch of reading but I can’t find a definitive answer to my problem.

I’ve build a hype doc that basically acts as a wrapper for a bunch of external pages that are called into an iframe (which is part of the hype doc). I have an (symbol) overlay that appears (display: “block”) over the iframe when a link is clicked (basically a loading indicator). I have a function which changes the the state of the symbol to “none” and I’d like to call that when the page finishes loading into the iframe.

I’ve read a bunch of stuff about accessing the hype api from external html etc, but none of it works for me. I suspect that it has something to do with the fact that the iframe is ‘inside’ the hype document, but I don’t have enough experience with javascript to be sure. I’ve tried riffing on the discussions in this thread - How to call hype js function from external HTML - however I’m not 100% sure if should be putting the in the of the hype doc or of the page that’s being loaded into the iframe.

I’m sorry for the basic nature of this question, I’m trying to exhaust every source I can before posting here for help.

2

search the web and the forum for postMessage.
code has to be placed within the loaded doc (iFrame) and the parent (hype).

it's a protocol that enables messaging between nested documents.

if it's all hype, you can use @MaxZieb's extension:

1 Like
3

Thank you very much!