Forum Discussion
Set Text Input Focus Via JavaScript
Hi,
Is it possible to call a function within a webObject using an execute JavaScript trigger?
I have assigned an accessibility label to a webObject - "animation" and then attempted to access a function within the webObject html using the following:
document.querySelector("[data-acc-text='animation']").startAnimation();
Where startAnimation(); is a function loaded in the webObject html
Is it possible to determine the elementID of the webObject? I have gone deep with the inspector with no luck.
This does not work.
Any insight that could be provided would be appreciated.
Hello romainjb I'd recommend sharing your question in our JavaScript group.
- Nathan_HilliardCommunity Member
Yes, but you have to communicate with the web object by sending messages between it and Storyline. The index.html inside the web object listens for the message, and then acts accordingly.
If you look at this post, you can see how it works (it is communicating between a SL slide and a web object).
How to Communicate Between Storyline and a mySQL Database | Articulate - Community
Focus on the In Storyline and On the Web Server - index.html portions. It uses XMLHttpRequest.
Note that this example talks to a web object linking to content on another server. In this cicumstance, this is the approach to use.
If you have a web object that is hosted from within your project (e.g., the index.html is local), then you can communicate directly between the iframe contents and SL in a similar way to what you were attempting. Using the data-acc-text selector does not work however.
In both cases, you need to use something like let iframe = window.frames[0] to locate the first iframe on the slide. If there are more than one, specify the correct frame.
Then...
iframe will refer to the window environment within the selected iframe (the global space).
iframe.document will refer to the DOM structure of the index.html
- NedimCommunity Member
To make it work, the most important part is targeting the iframe itself, because your startAnimation() function would be located inside the iframe’s content. The iframe is the container that holds the HTML document (the web object) within Storyline.
You need to select the iframe element using document.querySelector('iframe[data-dv_ref="iframe"]') (or other way). Once you have the iframe element, you use iframe.contentWindow to access the document inside the iframe, where the startAnimation() function is defined. Before calling startAnimation(), you check if it is defined and available in the iframe’s content.
Example of Execute JavaScipt trigger:var iframe = document.querySelector('iframe[data-dv_ref="iframe"]'); if (iframe && iframe.contentWindow) { var iframeDocument = iframe.contentWindow.document; if (typeof iframe.contentWindow.startAnimation === "function") { iframe.contentWindow.startAnimation(); } else { console.error("startAnimation function not found inside the iframe."); } }
And simple index.html with a animation:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animation Example</title> <style> #animatedBox { width: 100px; height: 100px; background-color: red; position: absolute; top: 50px; left: 0; } @keyframes moveRight { from { left: 0; } to { left: 80%; } } </style> </head> <body> <div id="animatedBox"></div> <script> // Global function window.startAnimation = function() { var box = document.getElementById('animatedBox'); box.style.animation = 'moveRight 2s ease-in-out forwards'; }; </script> </body> </html>
Ensure the startAnimation() function is globally defined. Then, publish to Review 360 or run it on a local server to avoid potential issues with blocked content due to CORS restrictions.
Result:
It's just a thought and a possible solution. I strongly recommend reading anything from Nathan_Hilliard to explore more angles and refined solutions. I also recommend GingerSwart advice to share any JavaScript related questions in JavaScript group.