I've been trying to get an iFrame content dynamically created, which includes a gsap script for animation.
I've managed to get the iFrame content created, but when it comes to the gsap script it says the timeline cannot find the style class.
The gsap library is imported in the parent document, and I'm accessing the library referencing "window.parent.gsap.timeline()...."
window.parent.gsap.timeline().fromTo(".fromLeft", { xPercent: -100 }, {xPercent: 0, duration:3});
the css includes:
.fromLeft {\
color: #ffffff;\
font: 28px Arial, sans-serif;\
font-weight: bold;\
text-align: left;\
text-shadow: 3px 3px 3px #505050;\
}
and the div object to animate specifies the class:
<div class="fromLeft">Text to scroll</div>
I've tries all sorts of combinations to get the iframe content replacement to work, which I can get to work in Chrome using various methods, but they are not compatible with IE11, I'm looking for a solution that is compatible with both.
The closest I have gotten writes a template of html code to a created document that is switched in to replace the existing iFrame content (generated from Adobe Captivate) project:
function scrollText(id,message)
{
var variables = {
html: '<div class="fromLeft">' + message + '</div>',
css: '.fromLeft {\
color: #ffffff;\
font: 28px Arial, sans-serif;\
font-weight: bold;\
text-align: left;\
text-shadow: 3px 3px 3px #505050;\
}',
js: 'window.parent.gsap.timeline().fromTo(".fromLeft", { xPercent: -100 }, {xPercent: 0, duration:3});',
jss: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js'
};
var template = [
'<html>',
'<head>',
'<style>',
variables.css,
'</style>',
'</head>',
'<body>',
variables.html,
'</body>',
'</html>'
].join('');
var iframe = document.getElementById(id).firstChild;
var newDocument = document.implementation.createHTMLDocument(iframe.contentDocument.title);
var iframeDocument = newDocument.contentDocument;
// Copy the new HTML document into the frame
var destDocument = iframe.contentDocument;
newDocument.open();
newDocument.write(template);
newDocument.close();
var srcNode = newDocument.documentElement;
var newNode = destDocument.importNode(srcNode, true);
destDocument.replaceChild(newNode, destDocument.documentElement);
var scriptInclude = document.createElement("script");
scriptInclude.src = variables.jss;
destDocument.body.appendChild(scriptInclude);
var scriptCode = document.createElement("script");
scriptCode.textContent = variables.js;
destDocument.onreadystatechange = function() {
if (destDocument.readyState == 'complete')
{
destDocument.body.appendChild(scriptCode);
}
};
}
I get the error:
VM395:97 GSAP target .fromLeft not found. https://greensock.com
_warn @ VM395:97
VM395:97 GSAP target not found. https://greensock.com
I don't know why it doesn't see the class! Whether it's to do with the iframe not being fully rendered I don't know, but that is why I added the onreadystatechange function to only add the script when "complete".
Any further help would be appreciated.
