How do I load new pages into existing iframes? Also, tell clip in an iframe to go to next frame?

[isilud_tengille]

Hi again, thanks for before, iframes loaded just fine, but now I'm trying to fix a few loose ends... I need to know how to make an iframe load new content when I press a button. So far I just make an iframe with a simple: 

mkDiv("iframe1", 10, 90, 750, 410, "mypage.html");

but I want to be able to press a button and have it unload the current page in that iframe and load a new page. My current config is very weird, I hope your head doesn't spin. By the way, that button is going to be in the iframe itself...

Here's how it currently is:

-Visit index.html and Main clip loads

-Click E-cards button

-Main clip goes to another frame

-That frame calls for an iframe to be created called "iframe"

-"iframe" contains Ecards.html, which is the main engine for e-cards

(ecards.html was originally 3 frames. 1st frame loads category, 2nd frame is the form to fill/send, 3rd frame is status of sent.

I chopped it down so it only contains the 1st frame... which leads me to... next step*)

*-Ecards.html calls for another iframe, "iframe1" and loads a category page.

-I click an item in the category page and it creates "iframe2" with a subcategory page, but removes

"iframe1" and its contents.

-I click an item in the subcategory page and it re-creates "iframe1" but this time loads a form/send page (specific to 1 ecard),

at the same time, it kills "iframe2" and the original "iframe".

In other words:

Main clip, click button, goes to new frame, that frame executes:

mkDiv("iframe", 10, 10, 750, 550, "Ecards.html");

"iframe" (Ecards.html) executes:

window.parent.mkDiv("iframe1", 10, 90, 750, 410, "Ecardscategory.html");

"iframe1" (Ecardscategory.html) has a button. click it and it executes:

window.parent.mkDiv("iframe2", 30, 70, 750, 410, "Ecardsbirthday.html");
window.parent.rmDiv("iframe1");

"iframe2" (Ecardsbirthday.html) has a button. click it and it executes:

	window.parent.rmDiv("iframe");
	window.parent.mkDiv("iframe1", 10, 10, 750, 550, "EcardsBday1Choose.html");
	window.parent.rmDiv("iframe2");

-----------------

Here's what I want it to be instead:

-Visit index.html, main clip loads

-Click E-cards button, go to another frame

-That frame creates "iframe" and loads Ecards.html

(Ecards.html is back to its original 3 frame state by the way...)

-Ecards.html creates "iframe1" (Ecardscategory.html)

-Click button in Ecardscategory.html, and keep "iframe1" alive, just change

its contents to Ecardsbirthday.html.

-Click button in Ecardsbirthday, and it should tell Ecards.html (from "iframe") to go

to the next frame... also to finally kill/remove "iframe1".

Now I mentioned in the old format, "specific to 1 e-card" for the form/send page. If I do it the new way,

I have to include a command

EcardSelect = "1";

and I'm not sure if this is allowed or recognized in HTML5/JS

In the flash version of my site, the button that sends the e-card is this:

on (release) {
	if (ToName eq "") {
		Status = "Please enter the Name of the person your sending this to";
	} else if (FromName eq "") {
		Status = "Please enter your Name";
	} else if (ToEmail eq "") {
		Status = "Please enter the Email address your sending this to";
	} else if (FromEmail eq "") {
		Status = "Please enter your email address";
	} else if (Greeting eq "") {
		Status = "Please enter a greeting message";
	} else if (IntroMessage eq "") {
		Status = "Please enter a Intro Message";
	} else {
		gotoAndStop (3);
		Status = "Sending Ecard - Please Hold";
		loadVariablesNum ("SendEcard.php", 0, "POST");
	}
}

(which by the way, I still need to somehow convert to HTML5/JS/Canvas?)

see where it says loadVariablesNum,  the 0 is what is changed by "EcardSelect = "1"....

So as you can see, I'm in a terrible pickle. I'd like to keep my site modular (using my iframes) because it helps me troubleshoot certain pieces rather than keep exporting the entire movie from Adobe Animate. It worked very well in flash, should be just the same here... minus the white flashing each time an iframe loads... (one thing at a time, I won't ask for help on that yet).

You can see my semi-complete page at hugclub.net (flash version)  vs my attempt at HTML5  hugclub.net/HTML5

I swear I'm gonna make this work somehow... If I can successfully get the e-cards to send, everything will fall into place (I already know what to do next once this engine is fixed).

if you think you need my source files, here they are in google drive https://drive.google.com/open?id=1KXKwMGHvnuXcpJ1-S_6r6JWSFQxRhi-O

The files you'll be interested in are:

index.fla frame44

ecards.fla (it is 3 frames, but i'm only using 1st frame in my current setup, would like to use all 3... ignore blank frame, it has to be there or animations don't work)

ecardscategory.fla (only birthday button)

ecardsbirthday.fla (only cake button)

ecardsbday1choose.fla (this is a custom page i created, it's actually the last 2 frames of ecards.fla, was planning to change the loadvariablesnum property from 0 to 1, so it selects the cake card) but again, I must convert my send button code...

Sorry if this is asking a lot. 2020 is nearly here and I fear I won't be able to even test my original flash website as a reference anymore, so I've got to get this fixed ASAP >.< it's brutal.

[ClayUUID]

https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

[isilud_tengille]

How do I use it? If my create is window.parent.mkDiv("iframe1", 30, 70, 750, 410, "Ecardscategory.html"); then would I just do window.parent.iframe1.replace("Ecardsbirthday.html"); ?

EDIT:  Wait hold on, I googled around for examples for the replace function, but it lead me to another one that seems to work:

document.getElementById("frametest").src="newSource.html";

 in which I did the following to make it work in my case:

_this.birthday.on('click', function () {
	window.parent.document.getElementById("iframe1").src="Ecardsbirthday.html";
});

Whew that takes care of that part at least. Thanks for the lead!!!!  I just tested it with sound on the page and when the page is replaced, the sound goes away (meaning that the previous page is unloaded, no memory leak). Ahhh what a relief....

OK Still hoping someone out there can help me with the send button code and e-card select dealy... that's the big part!

[ClayUUID · Accepted solution]

Using the .replace() window method instead of other ways of changing the URL replaces the current URL in the iframe's history. You want that, because you want the iframe content entirely under your control.

[isilud_tengille]

Edit:  I got the replace to work!!! here's my button's code.

_this.birthday.on('click', function () {
location.replace("Ecardsbirthday.html");
});