Forum Discussion
Set Text Input Focus Via JavaScript
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.