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.
.
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.