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

Report · Oct 24, 2019

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);

Report · 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" 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

Report · Nov 22, 2019

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.

Report · Nov 23, 2019

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

Adobe Community

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

1 Correct answer