/    Sign up×
Community /Pin to ProfileBookmark

Creating an HTML page via Javascript and targeting iFrame

Copy linkTweet thisAlerts:
Dec 19.2006

I haven’t been able to figure this out yet…..

Here’s what I want to do:

page A is an html page with an iFrame called “screen” with links to different movie pages i have created which display in the “screen” iframe (using target).

Instead of creating multiple pages, I want to generate a .js file to store all the source codes for the movies and then use a function to generate an html page using javascript (i.e. document.write). The movieinfo could be passed from a variable on the link (i.e. javascript:transferName(movieinfo) and using IF statements generate the appropriate code.

This would allow me to edit one source file instead of multiple files.

My only problem is that I want the html-generated page to display in the “screen” iframe. I can generate a page but I can’t get it to target the iframe. Any suggestions would be GREATLY appreciated.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@cyberowlDec 19.2006 — You generate the page using document.write ?

Maybe you should create a blank page which appears in the iframe, so you could document.write to it.

document.frames("IFrameID").getElementByID.... for field in the blank.html
Copy linkTweet thisAlerts:
@Synergy_711authorDec 30.2006 — I'm relatively new to JS and I guess I could say that I know enough to be dangerous.

Could you elaborate a little bit more?
Copy linkTweet thisAlerts:
@cyberowlDec 30.2006 — My mistake Synergy, the only property of the iframe that you can change is the src so it loads another page, BUT, what I can suggest to you is to do as this:
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
function fillframe(opt) {
if (opt == "eragon")
document.getElementById("screen").innerHTML = "Eragon details";
else if (opt == "apocalypto")
document.getElementById("screen").innerHTML = "apocalypto details";
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="#" onclick="fillframe('eragon')"&gt;Eragon&lt;/a&gt;
&lt;a href="#" onclick="fillframe('apocalypto')"&gt;Apocalypto&lt;/a&gt;
&lt;div id="screen" style="width:300px;height:300px;"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

the javascript code you can put in a separated file. You will have the same behavior that an iframe. Just give it a try.
Copy linkTweet thisAlerts:
@michaelcDec 30.2006 — I haven't been able to figure this out yet.....

Here's what I want to do:

page A is an html page with an iFrame called "screen" with links to different movie pages i have created which display in the "screen" iframe (using target).

Instead of creating multiple pages, I want to generate a .js file to store all the source codes for the movies and then use a function to generate an html page using javascript (i.e. document.write). The movieinfo could be passed from a variable on the link (i.e. javascript:transferName(movieinfo) and using IF statements generate the appropriate code.

This would allow me to edit one source file instead of multiple files.

My only problem is that I want the html-generated page to display in the "screen" iframe. I can generate a page but I can't get it to target the iframe. Any suggestions would be GREATLY appreciated.[/QUOTE]

Just wondering why you want an Iframe ?

what I might suggest

in the area where you were going to put the Iframe

<div id="movieArea" style="width:???px; height:???px; overflow:auto">

</div>

then in your Javascript

e=document.getElementById("movieArea");

e..innerHTML="movie blah blah blah";

now you have it act like an IFRAME only when you need it to.
×

Success!

Help @Synergy_711 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...