Forum Discussion

SANDRAADAMSON's avatar
SANDRAADAMSON
Community Member
5 days ago

How to trigger an iframe button in storyline course?

I want to be able to set up a trigger that won't allow the end user to move forward in the course until they click on the "save as" or "print" buttons along the top of an iframe. The iframe is created using an index.html file to pull in a pdf so the buttons along the top are created from that coding. How do I set up a trigger on this?

instructional design
storyline 360
  • Nedim's avatar
    Nedim
    Community Member
    5 days ago

    I don't think you can do that. Due to browser security restrictions, when the parent page and the iframe come from different websites (cross-origin), you can't directly access the content inside the iframe. This is to protect user privacy and prevent malicious activity. If both the parent page and iframe are from the same website (same-origin), then access could be allowed with something like:

    const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const button = iframeDocument.querySelector('#buttonId');

    Can you share your index.html?

  • SANDRAADAMSON's avatar
    SANDRAADAMSON
    Community Member
    5 days ago

    The iframe isn’t pulling information from a website, its coding I placed into an index.html to pull in a company policy pdf form into a slide in an iframe for my course.

     

    <!DOCTYPE html>

    <html>

    <title>AJW Fitness For Work Policy - FEBRUARY 2025</title>

    <body>

    <object data="AJW Fitness For Work Policy - FEBRUARY 2025.pdf" type="application/pdf" width="720" height="530">

    </object>

    </body>

    </html>

    • Nedim's avatar
      Nedim
      Community Member
      4 days ago

      Okay, I see now. Although the iframe isn’t pulling information from a website, you are encountering a similar issue. What we see at the top is the PDF viewer. If the PDF viewer is hosted on a different domain (for example, within a browser's default PDF viewer), you cannot modify its UI or control its behavior due to the same-origin policy. This means you can't directly interact with or manipulate the PDF viewer's UI elements, such as the print button. If you have created a custom print button within your HTML, you could potentially log an action or modify a variable in Storyline. This could, in turn, enable functionality like unlocking the "Next" button, for example. However, the default print button in the PDF viewer would still be present, which could lead to confusion since there would be two print buttons available.

      • BradPaul's avatar
        BradPaul
        Community Member
        4 days ago

        I was afraid you were going to tell me that i've been all over the internet looking for a solution that doesn't appear to exist:( Can I pick you brain on that print button....I noticed when I click on it, it brings up a "save as" dialogue box. Is there some kind of javascript to create that action? I wanted a button like that in storyline but I can't seem to find a button that will do that, seems my only option on buttons in there is to open a new window.

  • SANDRAADAMSON's avatar
    SANDRAADAMSON
    Community Member
    4 days ago

    How do I do this "You can use a white rectangle and slightly reposition the web object to ensure the PDF viewer header isn't visible, creating a cleaner look." The object takes up some of the space on the page but not all of it I wouldn't know where to position that rectangle as the position of the iframe doesn't seem to be static it moves if a user uses the ctrl+/ctrl- buttons? Also I don't know the java script coding for the save as button, any chance you can walk me through this step by step? I am not a coder and I am very new to storyline and elearning design in general. But this does sound like what I am looking for a way to make sure they've clicked the save as button before they can proceed.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    9 hours ago

    How do you call any function in an iframe ? This is the approach

    https://360.articulate.com/review/content/b3935817-adfd-42b0-ab26-0326c9fec333/review

    As you can see here. You need to setup a eventlistener in your index.html for your Webwindow/iframe. The index.html for my sample is like this.

    <body>

<object
      data="./SERMaIEL.pdf"
      type="application/pdf"
      width="100%"
      height="700px"
   ></object>

</body>
 <script>
 window.message = "";

window.addEventListener("message", function(event) {
    let data = event.data;
console.log("event called");
  if(data.length > 4 && data!= "clickedPrint" && data!= "clickedSaveAs"){
  }else if(data === "clickedPrint"){
       console.log("print called");
    window.focus();
    window.print();
  }else if(data === "clickedSaveAs"){
    console.log("saveAs called");
        window.focus();
    window.saveAs();
  }
 
});

</script>

    In your Storyline you need to select the iframe and then use 'PostMessage' to call the event in the WebObject/iframe.

    For the printbutton thats like this:

    const iframe = document.querySelector("#slide-window > div > div > span > div > div > div > div.slide-layer.base-layer.shown > span > div.slide-object.slide-object-webobject.shown.cursor-hover > div > iframe");
const iframeWindow = iframe.contentWindow;
iframeWindow.postMessage("clickedPrint", "*");

    PostMessage is the approach you can target any functionality in an WebObject or iframe.

Related Content