Java script advanced frame
Download as DOC, PDF•0 likes•860 views
The document discusses placing JavaScript functions in a single frame that will not change so they are accessible to all frames, and provides examples of calling functions between frames by specifying the frame name; it also covers using a hidden frame to store JavaScript code and dynamically creating frames and the frameset using JavaScript.
Java script advanced frame
- 1. Lecture 19 Using One Frame for Your Main JavaScript Code As explained in the previous lecture, HTML offers a concept called frames that allows you to divide the available space in a given window into multiple frames into which you can load different documents. When you are working with frames, it is sometimes useful to place all your JavaScript functions in one frame that will not change so they are easily accessible to all frames at all times. For example, if all the functions fn1 (), fn2 () are placed inside frame1 and frame 2 want to call function fn1 (), frame 2 will use the following statement Parent.frame1.fn1 () Let us take an example: Below is the code for frameset.html <HTML> <frameset cols="50%,50%"> <frame name="lp" src="frame1.html"> <frame name="rp" src="frame2.html"> </frameset> </HTML> Below is the code for frame1.html <HTML> <HEAD> <TITLE> Frame 1</TITLE> <script language="JavaScript"> function fn1() { window.alert("Function 1() called"); } function fn2() { window.alert("Function 2() called"); } </script> </HEAD> <BODY> This is frame 1 <br> <a href="#" onClick="fn1()"> Call First Function </a> <br> <a href="#" onClick="fn2()"> Call Second Function</a> </BODY> </HTML> Below is the code for frame2.html <HTML> <HEAD> <TITLE>Frame 2</TITLE> <script language="JavaScript"> </script> </HEAD> <BODY> This is frame 2 <br>
- 2. <a href="#" onClick="parent.lp.fn1()"> Call First Function </a> <br> <a href="#" onClick="parent.lp.fn2()"> Call Second Function</a> </BODY> </HTML> Using a Hidden Frame for Your JavaScript Code Sometimes you want to use a “hidden” frame to store a document containing nothing and only your JavaScript code. <frameset cols=”0,50%,50%”> <frame …> <frame …> <frame …> </frameset> Let us take an example Here is code.html <HTML> <HEAD> <TITLE> Source code for all the frames</TITLE> <script language="JavaScript"> function fn1() { window.alert("function f1() called"); } function fn2() { window.alert("function f2() called"); } </script> </HEAD> <BODY> </BODY> </HTML> Here is the frameset.html <HTML> <frameset cols="0,50%,50%"> <frame name="codeFrame" src="code.html"> <frame name="lp" src="frame1.html"> <frame name="rp" src="frame2.html"> </frameset> </HTML> Below is frame1.html <HTML> <HEAD> <TITLE> Frame 1</TITLE> </HEAD> <BODY> This is frame 1 <br> <a href="#" onClick="parent.codeFrame.fn1()"> Call First Function </a> <br> <a href="#" onClick="parent.codeFrame.fn2()"> Call Second Function</a> </BODY>
- 3. </HTML> Below is frame2.html <HTML> <HEAD> <TITLE>Frame 2</TITLE> </HEAD> <BODY> This is frame 2 <br> <a href="#" onClick="parent.codeFrame.fn1()"> Call First Function </a> <br> <a href="#" onClick="parent.codeFrame.fn2()"> Call Second Function</a> </BODY> </HTML> Working with Nested Frames All the examples that you have seen till now only deal with single layer frames. We can have nesting of frames that mean, a frame can be further sub divided into two frames. How to use JavaScript code with nested frames? Here is an example to understand calling functions in Nested Frames Below is the code for frameset.html <HTML> <frameset cols="50%,50%"> <frame name="lp" src="frame1.html"> <frame name="rp" src="frame2.html"> </frameset> </HTML> Below is the code for frame1.html <HTML> <HEAD> <TITLE> Frame 1</TITLE> </HEAD> <BODY> This is frame 1 <br> <a href="#" onClick="parent.rp.subFrame2.fn1()"> Call Function in SubFrame 2 of Frame 2</a> </BODY> </HTML> Below is the code for frame2.html <HTML> <frameset rows="20%,80%"> <frame name="subFrame1" src="subFrame1.html"> <frame name="subFrame2" src="subFrame2.html"> </frameset> </HTML> Below is the code for subFrame1.html <HTML> <HEAD> <TITLE> Sub Frame1</TITLE> </HEAD> <BODY> This is sub Frame 1 </BODY> </HTML> Below is the code for subFrame2.html
- 4. <HTML> <HEAD> <TITLE> Sub Frame2 </TITLE> <script language="JavaScript"> function fn1() { window.alert("Function f1 called"); } </script> </HEAD> <BODY> This is subFrame 2 </BODY> </HTML> Dynamically Creating Frames in JavaScript Dynamically creating frame means, creating the <frameset> and <frame> at runtime using JavaScript. Till now, we have been creating <frameset> using HTML. But now we will learn, How to create <frameset> at run time. Here is the code for that. <HTML> <script language="JavaScript"> document.open(); document.write("<frameset cols='50%,50%'>"); document.write("<frame src='frame1.html' name='lp'>"); document.write("<frame src='frame2.html' name='rp'>"); document.write("</frameset>"); document.close(); </script> </HTML> Important thing that is worth mentioning here is that I have used single quotes (‘’) instead of (“”) in all the tags.