Adobe animate canvas iframe, how to communicate from main document to canvas?

New Here ,
Oct 23, 2020 Oct 23, 2020

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.

TOPICS
Code, How to, Other

Views

78

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard

Copied

image.pngAny help would be appreciated! 🙂

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 23, 2020 Oct 23, 2020

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 23, 2020 Oct 23, 2020

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

 

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard

Copied

The iframe will be on the same domain. So there won't be cross origin problems? :?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 23, 2020 Oct 23, 2020

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines