Load external Local Html Page and click a button to Return to Main

[jay79482693]

How can I load external Html page (created in Animate CC local file) as a pop window in my main page. For example I want to have my main page with lets say 3 buttons. I click button one and that opens a popupwindow on my main page with content on it. maybe a video or video. Same for buttons 2 and 3 but they will hold different content.  If they click a button on that page they will return to the main page.  If I save this as one page it will be a huge file so I have to have multiple pages and communicate between each page to the one main page.

Any help is very much appreciated.  

[JoãoCésar]

Hi.

Here is a sample of this kind of interactivity.

Preview:

https://bit.ly/34LXHty

Code:

JavaScript (index.html):

const buttons = document.getElementById("buttons");
const popUp = document.getElementById("popup");

buttons.addEventListener("click", e =>
{
	const id = e.target.id;

	popUp.src=`${id}/popup_${id}.html`;
	popUp.classList.add("active");
});

const close = e =>
{
	popUp.src="";
	popUp.classList.remove("active");
};

window.document.addEventListener("close", close, false);

Each Animate output / iframe / pop-up:

var root = this;

root.close.on("click", function(e)
{
	var event = new CustomEvent("close");
	window.parent.document.dispatchEvent(event);
});

Files / source / code / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/iframes_as_popups

I hope this helps.

Regards,

JC

[ClayUUID]

JC, you're using ES6 for no reason again. What you posted will just crash on IE11.

[JoãoCésar]

Yeah, I know I'm using ES6.

It isn't forbidden and there are solutions for the compatibility issues out there.

[ClayUUID]

Do you believe the person you're responding to is sufficiently skilled in JavaScript to make the necessary corrections?

A support forum is no place for neophilia.