Highlighted

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

New Here ,
Aug 28, 2020

Copy link to clipboard

Copied

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.  

Views

60

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

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

New Here ,
Aug 28, 2020

Copy link to clipboard

Copied

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.  

Views

61

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
Aug 28, 2020 0
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Aug 30, 2020 0
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
Aug 30, 2020 0
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

Yeah, I know I'm using ES6.

 

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

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Aug 30, 2020 0
ClayUUID LATEST
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Aug 30, 2020 0