Login/Register
Dynamically set frame src using Javascript
Asked Answered
Solved javascripthtmlcss
T

2

14

I have a HTML element

<frame src="#" title="Content Frame" name="content" id="content" />

I want to set it's "src" dynamically using Javascript on page load. How can I do that ?

I am trying something like;

document.getElementById('content2').contentWindow.location = 'xyz_frame.html';

But for some reason it is not working..Again it is a element and not

A Rough code;

<html>
<head>
<script language="javascript"> 
function LoadPage(){ 
document.getElementById('content2').src = 'ipad_lrd_frame.html';
}
</script> 
</head>
<body onload="LoadPage()">
<frame id="content2"></frame>
</body>

</html>
Torrietorrin answered 30/4, 2011 at 13:26 Comment(1)
Isn't it <frame src="#" title="Content Frame" name="content" id="content"></frame> – Bresee
S
23

This should work;

document.getElementById('content2').src = "url";

(Also you have mismatched IDs for the frame and getElementById call)

For a FRAME, you need a FRAMESET which precludes the use of a BODY, so;

<frameset rows="50%,*" onload="LoadPage();">    
   <frame id="content2"></frame>
   .....

Update:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript">
function LoadPage(){
    document.getElementById('content1').src = "http://www.google.com";
    document.getElementById('content2').src = "http://www.bing.com";
}
</script>
<title></title>
</head>
<frameset rows="50%,*" onload="LoadPage();">    
    <frame src="#" id="content1">    
    <frame src="#" id="content2">                
</frameset>
</html>
Sassaby answered 30/4, 2011 at 13:32 Comment(4)
Your going to have to show a reduced test case with all the relevant code/markup – Sassaby
Put the onload="LoadPage();" in body tag – Bresee
In case it helps someone else, mine wasn't working as I had onLoad rather than onload. :) – Gatehouse
Works on IE, Firefox and Chrome. Thanks! – Inclined
F
2

I would think fetching frames by name would be more suitable:

document.getElementsByName('content2')[0].src = 'ipad_lrd_frame.html';

Tested it successfully. Ensure your page uses a frameset doctype and you do not include body tags (use frameset tags instead). Also note your script type should be text/javascript, rather than language "javascript".

Frijol answered 30/4, 2011 at 16:4 Comment(7)
Hi...cool solution by you..only 1 problem though...Works PERFECTLY in firefox...not sure why it is not working in IE... – Torrietorrin
And just to add if I alert document.getElementsByName('content')[0].src , it shows the value correctly even in IE i.e. the complete path for 'ipad_lrd_frame.html'...But finally does not show the content inside ipad_lrd_frame.html – Torrietorrin
And I have done exactly what you have said; 1. Used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "w3.org/TR/html4/frameset.dtd"> 2. No body tag 3. script type is text/javascript 4. Used getElementsByName – Torrietorrin
Also an interesting observation in IE; If I set the document.getElementsByName('content')[0].src to google.com, it works fine, but if I set it to a local html file 'ipad_lrd_frame.html', it does not display anything... – Torrietorrin
@hmthr - So what if you try modifying the src value from 'ipad_lrd_frame.html' to 'http://mydomain.com/myfilepath/ipad_lrd_frame.html'? – Frijol
Well...for some strange reason, I copied/created new file and is working there...I'll keep you posted and also accept the answer in some time (if there are no further issues)..Thx. – Torrietorrin
Great, so it definitely works then :) If you post your complete source code for the index I can try see if there are any errors or conflicts that may be causing the issue, otherwise I really can't help you any further unfortunately... – Frijol

© 2022 - 2024 — McMap. All rights reserved.