CODEWITHSUNDEEP
javascriptphponloadframes
marcnyc
marcnyc

Reputation: 585

how to target a frame of a frameset with an onload event

I have a frameset like this:

<frameset rows="120px,100%">
<frame name="top" id="top" src="top.php" noresize frameborder="0" scrolling="no" />
<frame name="main" id="main" src="main.php" noresize frameborder="0" scrolling="yes" />

Inside the main.php file I have:

<script>
function reload_top() {
    top.frames['top'].location.href= "http://www.google.com";
}
</script>

And the onload event of the main.php body is:

<body onload="reload_top();">

What I would like to achieve is that every time somebody loads main.php that file re-loads the top frame top.php inside the top from, but so far I can only get it to break out of the frameset and load a new page...

I've tried any one of these:

document.getElementById('top').src = "http://www.google.com";

window.top.location.href = "http://www.google.com";

top.frames['top'].location.href= "http://www.google.com";

None of them work. What am I doing wrong?

Thanks

Upvotes: 1

Views: 12001

Answers (4)

marcnyc
marcnyc

Reputation: 585

after some more digging I found out that the way to target a frame from another frame is to use:

parent.document.getElementById('frameName').src

so my function now works and looks like this:

<script>
    function reload_top() {
        parent.document.getElementById('top').src = "venues.php";
    }
</script>

Thanks for trying to help guys.

Upvotes: 0

Akshath
Akshath

Reputation: 86

Try Another answer here we use onload event in frameset element 

<html>
 <head>
 <title>Frame: Onload & Onunload Examples</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="JavaScript">
 <!--
  function testOnload() {
   // alert('OnLoad: Alert in testOnload() executed by onLoad property of frameset tag.');
  document.getElementById("top").src="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_frames2";
  }
 function testOnUnload() {
 //alert('OnUnload: Alert in testOnUnload() executed by onUnLoad property of frameset tag.')
  }
  //-->
  </script>
  </head>
   <frameset rows="80,*" frameborder="0" border="0" framespacing="0" 
   onLoad="javascript:testOnload()"   
   onUnload="javascript:testOnUnload(); alert('onUnload: alert in frameset tag')">
<frame name="topFrame" scrolling="NO" noresize src="https://developers.google.com/oauthplayground/" id="top">
<frame name="mainFrame" src="https://developers.google.com/oauthplayground/">
<noframes>
    <body bgcolor="#FFFFFF">
     <p>Sorry, this page needs a browser that supports frames.</p>
    </body>
</noframes>
</frameset>
</html>

Upvotes: 2

Akshath
Akshath

Reputation: 86

Html5 doesnot support frames set but use jquery and try it

 <!DOCTYPE html>
 <html>
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">        </script>
 <script>
 $(document).ready(function(){

        document.getElementById("top").src="http://yahoo.com";
 });
</script>
</head>
<frameset cols="25%,*,25%" id="abc">
 <frame src="http://www.google.com" id="top" name="top">
 <frame src="http://www.google.com">
 <frame src="http://www.google.com">
  </frameset>
 </html>

Upvotes: 0

Aditya
Aditya

Reputation: 851

As an information, frames tag is no more supported in HTML5. Would you want to use iframe to load different pages in one page.?

The problem you are unable to set the location of frame is because it is undefined when you try to access the frame

e.g. code

<iframe id="topf" src="stacktop.php"></iframe>
<script>
     function reload_top() {
        var a = document.getElementById('topf');
         a.src = "http://www.aapastech.com";
    }
 </script>

Upvotes: 0

Related Questions