Forum Discussion

StefanS's avatar
StefanS
Community Member
20 days ago
Solved

How can I interact through javascript with an embedded Webobject?

Hello,
I am experimenting with methods for enhancing images and diagrams with contextual information on demand. (see image)

I embedded a web object (iframe) in my Storyline course, and I can now interact within the HTML code. For example, I can navigate to a specific text position.

But I'm stuck trying to figure out how to interact with the embedded HTML code “from the outside” using JavaScript.
My intention is to engage with the HTML code by clicking a button on the Storyline slide.
The button triggers JavaScript, which sends a command to the HTML code.

Use case 1: Navigating to a specific section of the embedded HTML text file.
Use case 2: Sending input to an embedded web app for a calculation.

Could someone in this community point me to an example file or offer a hint?

Thanks in advance.

  • StefanS's avatar
    StefanS
    10 days ago

    Hi Sam,
    Thanks for the tip!
    Due to the overall structure, it was actually much trickier than I expected.
    After chatting with Claude.ai for a while, I got it running perfectly with additional features I hadn't originally considered. (As I was running out of messages, I had to switch to the Pro version, but it was absolutely worth it.)

    If you're not a seasoned programmer, I highly recommend using Claude.ai to generate, improve, and debug your JavaScript code.
    The conversations are a real joy! By sharing the console info and screenshots, I received valuable feedback and great support with working code snippets.

    Adding HTML web objects and JavaScript opens up another dimension to our courses.

2 Replies

  • SamHill's avatar
    SamHill
    Super Hero
    20 days ago

    You would need to use contentWindow.

    // get the web object
const webobject = document.querySelector('iframe').contentWindow
// Execute function in web object
webobject.myFunction()

     

    • StefanS's avatar
      StefanS
      Community Member
      10 days ago

      Hi Sam,
      Thanks for the tip!
      Due to the overall structure, it was actually much trickier than I expected.
      After chatting with Claude.ai for a while, I got it running perfectly with additional features I hadn't originally considered. (As I was running out of messages, I had to switch to the Pro version, but it was absolutely worth it.)

      If you're not a seasoned programmer, I highly recommend using Claude.ai to generate, improve, and debug your JavaScript code.
      The conversations are a real joy! By sharing the console info and screenshots, I received valuable feedback and great support with working code snippets.

      Adding HTML web objects and JavaScript opens up another dimension to our courses.