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.
.
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:
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 pdfThis brings me to another questions, if I put this pdf on my server does it have to stay on my server or will storyline embed all the information from the google docs viewer and the pdf right into the course like it does in the way I am doing it now? Can I remove the file from my server once the course is published? It's not actually pulling the pdf from that server location while the course is running for a person right?
The Google Docs Viewer does not store or cache the PDF—it simply loads it from the provided URL. If the file is removed from the server, it will no longer be accessible.