Button action to change contents of External HTML Object (iframe)

You shouldn't use blanks in attributes, so I'll call your iFrame: name = "webpages"

Action goes

On: Click

Action: Run Javascript

Javascript: document.getElementsByName("webpages")[0].src ="sample.html";

[0] means the first element that has the name "webpages". It should get the iframe if there's no other element with the same name.

Tim

1. Change the iframe code to include an id:

< iframe src="http://www.lectora.com" width="780" height="600" id="iframe1">< /iframe>

2. Change the Lectora action to:

On: Click

Action: Run Javascript

Javascript: document.getElementById("iframe1")[0].src ="sample.html";

Tim,

Thanks for posting the JavaScript for me. Unfortunately, I could not get it to work. I must have something wrong with the code in the External HTML Object, which I am now calling "iframe1" because I can get multiple iframes to work using buttons that show/hide them. All of the iframes (iframe1, iframe2, and iframe3) are initially hidden. I have 3 buttons that show each iframe while hiding the others. That works fine except that the iframes preload, slowing down the display of rest of the page. The iframes are preloading first and then the buttons display. If I could see the code like I can with Dreamweaver, then I could make sure that the iframes are the last thing to load. I don't know how that can be done in Lectora.

My code in iframe1 for the external html object is:

The iframes are stacked on top of each other. iframe1 and the other two open fine when the buttons are clicked, but to avoid the preloading problem, I need to control the launching of webpages by onclick actions that use JavaScript to change from webpage to webpage in a single iframe. Do I need to change the code in the external html object to make your code work?

Thanks!