Forum Discussion
How to trigger an iframe button in storyline course?
I was finally able to get a folder at the base of our website to try this and it still doesn't work. I went to the link you have above on my mobile phone to test your example and even yours doesn't show the actual file on a mobile phone it shows a link to download where your document should be...it works properly on a desktop but not on a mobile phone. Is there any script/coding to make a document show in an iframe on a mobile phone using the web object in storyline instead of showing a download button where the document should be showing like it does on a desktop. See below I want the actual document showing in that iframe not a download button.
.
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>
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.
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.
Unfortunately, the PDF viewer here poses a significant obstacle when it comes to controlling its behavior. To address this, I would try to hide the viewer header and create two buttons in Storyline: Save and Print. This approach helps avoid users clicking the PDF viewer’s built-in buttons, which may not produce the desired action.
To ensure consistent access to a PDF file in Articulate Storyline, I would import the PDF into the Resources folder. This makes its path easily accessible via JavaScript. While it’s possible to target a PDF inside the web object folder, this folder’s name changes each time the index folder is imported as a web object under a new name, which complicates things.
To display the PDF, I use the same index.html file. 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 Save button executes JavaScript to open the "Save As" dialog directly. The Print button opens the PDF in a new window with defined dimensions, allowing users to print or save the PDF from there. (The print function may be redundant if the PDF can be saved directly.) Clicking either button would, in turn, enable the Next button on the slide, ensuring users complete the intended actions before proceeding. See my example below:
