revisit - make one iframe move another iframe's timeline forward, how?

Explorer ,
Oct 24, 2019 Oct 24, 2019

Copy link to clipboard

Copied

i never did get this working. here's my setup. using adobe animate canvas:

 

main clip (index.html) one of the frames generates iframe0 using mkdiv

iframe0 (page1.html) one of the frames generates iframe1 using mkdiv

iframe1 (subpage.html) i have a button that when pressed, i'd like it to move iframe0 (page1.html)'s timeline forward by 1 frame.

 

sounds simple enough.. but it's proven to be very confusing. i humbly request a ready to use copy/paste code that makes this possible. i've tried suggested postMessage(), except I have absolutely no idea how to even structure it. the tutorials are confusing as it is, so all I can do is hope someone knows >.<  thanks guys.  all other bits in previous posts are working, so you guys are doing great so far!

 

page1.html

 

var receiveMessage = function(event) {
    this.gotoAndStop(2);
}
window.addEventListener("message", receiveMessage, true);

 

 

subpage.html  

 

var this = _this

_this.button1.on('click', function () {
var iframegrab = window.document.getElementById('iframe0');
	iframegrab.postMessage('message', '*');
});

 

 

interestingly, if i do this code, it makes main clip (index.html) move its timeline no problem

 

window.parent.exportRoot.gotoAndStop(2);

 

 

Views

492

Likes

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

correct answers 1 Correct Answer

Adobe Community Professional , Nov 20, 2019 Nov 20, 2019
Hi. You can achive this using custom events. Here is a sample: Code: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Communication Between Iframes</title> <link rel="stylesheet" href="main.css"> </head> <body> <iframe id="destination" src="page0.html" frameborder="0"></iframe> <iframe src="page1.html" fra...

Likes

Translate

Translate
Adobe Community Professional ,
Nov 20, 2019 Nov 20, 2019

Copy link to clipboard

Copied

Hi.

 

You can achive this using custom events.

 

Here is a sample:

 

Code:

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Communication Between Iframes</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <iframe id="destination" src="page0.html" frameborder="0"></iframe>
    <iframe src="page1.html" frameborder="0"></iframe>

    <script>
        function advanceTimelineHandler(e)
        {
            document.querySelector('#destination').contentWindow.exportRoot.advanceTimeline(e.detail.offset);
        }

        window.document.addEventListener("advanceTimeline", advanceTimelineHandler, false);
    </script>
</body>
</html>

 

 

main.css

 

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

iframe
{
    width: 550px;
    height: 400px;
    min-width: 550px;
    min-height: 400px;
}

 

 

page0.fla (page0.html)

 

var root = this;

root.advanceTimeline = function(offset)
{
	root.gotoAndStop(root.currentFrame + offset);
};

root.stop();

 

 

page1.fla (page1.html)

 

var root = this;

root.button.on("click", function(e)
{
	var event = new CustomEvent("advanceTimeline", { detail: { offset: 1 } } );
	window.parent.document.dispatchEvent(event);
});

 

 

Online demo: here.

Source files (fla, html, js, css, images): here.

 

I hope this helps.

 

 

Regards,

JC

Likes

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
Explorer ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

Update: It works 100%, thank you so much for this. But you've got to hear about what happened to me while trying to implement your solution. It's gonna make you cringe...

First I tried copying your code into my project. Javascript from the index, then the JS from the fla files into my own... and it didn't work. Hmm, head scratcher... I knew that your worked just fine, so I put your page0 and page1 in my arrangement instead, they worked... so mine should work? Just by chance... I decided to copy all my content into your working fla files and export from there. It worked.

Turns out my fla files were somehow corrupt. Frames were misbehaving, certain code was being ignored, it was a nightmare. I KNEW something was wrong... I just couldn't pinpoint it. I had no idea fla files could go bad and that you'd still be able to open them as normal and continue working on them. Had I never gotten help from you, I would be working on the same broken fla file, never knowing that past solutions might have actually worked 😞  So really, thanks for all your help.

Likes

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 ,
Nov 23, 2019 Nov 23, 2019

Copy link to clipboard

Copied

LATEST

Hi! This is great! I'm glad you managed to solve the issue.

 

And, yeah, unfortunately sometimes we have to take into account the integrity of a FLA file.

 

I also solved many problems in the past by just copying and pasting my content into new files.

 

 

Have a great weekend!

 

Regards,

JC

Likes

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