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.
.
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:
- 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.
Hi Nedim,
I got this all working exactly the way I want it but now it seems I've got another problem. The index.html page I used to pull the info into the slide isn't working on my mobile device. Everything works perfectly on the desktop/computer/laptop. Is there some kind of coding I can put to make the pdf display on mobile phones, right now there's an "open" blue button showing up within the iframe instead of the actual pdf.
I believe the issue is due to how mobile browsers handle PDF rendering. Unlike desktop browsers, most mobile browsers don’t support displaying PDFs directly within an <iframe>. Instead, they prompt users to open the PDF in an external app or the browser's built-in PDF viewer.
Do you have access to a server where you can upload your PDF? If so, you can try embedding the PDF using Google Docs Viewer, which forces the PDF to render within the <iframe>. This should improve compatibility across devices.
Example:
<iframe src="https://docs.google.com/gview?url=https://yourserver.com/yourfile.pdf&embedded=true" style="width:100%; height:500px;" frameborder="0"> </iframe> // replace https://yourserver.com/yourfile.pdf with the actual link to your pdf