Copy link to clipboard
Copied
Hello.
I am creating content with adobe animate canvas.
I am embeding generated canvas output to my page as iframe.
How can I perform communication between adobe generated canvas output and actual my page document.
Copy link to clipboard
Copied
Any help would be appreciated! 🙂
Copy link to clipboard
Copied
If your article HTML has this code:
function callMe(msg) {
alert("callMe(" + msg + ")");
}
then, parent.callMe() should work. In other words, presuming the content block's instance name is "contentBlock1":
this.contentBlock1.on("click", function() {
parent.callMe("Hello, world");
});
Without "this." in front of it, "parent" refers to "window.parent" which is the owner of the iframe.
Copy link to clipboard
Copied
Although it's possible to directly access functions and properties in and out of iframes, this sort of thing is prone to being blocked by modern browsers as a cross-site scripting (XSS) security violation if they think the iframe and the parent are in different domains. The safe way to perform parent/iframe communication is to use postMessage().
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Copy link to clipboard
Copied
The iframe will be on the same domain. So there won't be cross origin problems? :?
Copy link to clipboard
Copied
Also this is the only way to test parent/iframe communication from your local file system on modern browsers, since they consider everything from a local drive to be a different domain, even if it's the same drive and path.