Navigator, Windows and Frames Browser Objects Navigator, Windows and Frames
Browser Object Model JavaScript programs are associated with a browser window and the document displayed in the window. In browser object model, the window is at the top of the tree and below it are window objects, navigator objects, array of window objects, document object (html document), history object, location object and screen object. Below document object we have link objects[], anchor objects[], form objects[], image objects[], applet objects[], embedded objects[]. Below form objects[], we have elements[] for button, check box, password. By combining the browser and document object models, JavaScript allows you to manipulate all of the elements in a page as objects.
Navigator Object Contains properties and methods that describe the browser. Properties: appCodeName, appName, appVersion, mimeTypes, platform, userAgent. Navigator’s properties allow you to detect information about the user’s browser so you can customize your Web page in a way that is transparent to the user.
Navigator Object – list of properties - Example 1 <html> <head><title>Navigator Object</title></head> <body> <script language="JavaScript"> document.write("<font size=+1><b>\ The properties of the \"navigator\" object are:</b><br>"); for(var property in navigator){ document.write(property + "<br>"); } </script> </body> </html>
Navigator Object – appName, appVersion, userAgent, platform - Example 2 <html> <head><title>The Navigator Object</title></head> <body> <h3>About The Browser</h3> <script language="JavaScript"> var BrowserName= navigator.appName; var BrowserVersion = navigator.appVersion; var BrowserAgent= navigator.userAgent; var platform= navigator.platform; document.write("<font size='2'>"); document.write("<b>The Browser's name is:</b> " + BrowserName + "<br>"); document.write("<b>The Browser version is:</b> " + BrowserVersion + "<br>"); document.write("<b>The Browser's \"user agent\" is:</b> " + BrowserAgent + "<br>"); document.write("<b>The Browser's platform is:</b> " + platform + "<br>"); document.write("</font>"); </script> </body> </html>
Navigator Object: Plug-Ins Plug-Ins are special software programs that add the ability to listen to audio, watch video and movie clips etc… Examples: Flash player, Adobe Acrobat Reader. The plugins[] array of the navigator object contains a complete list of installed plug-ins. Each element of the array represents a plug-in object
function pluginDetector(type) – Example 3 <html> <head><title>Plugin Detection</title> <script language="JavaScript"> function pluginDetector(type) { if (navigator.plugins[type]){return true;} else{return false;} } </script> </head> <body bgcolor="magenta"> <font face="verdana"> var plugin = prompt("What plugin do you want to check for?",""); if (pluginDetector(plugin)) {alert("You have the plugin "+ plugin);} // Does the browser // support plug-ins? else {alert("Don't have the plugin");} </body> </html>
List of plug-ins installed (Netscape) – example 4 <html> <head><title>Plugin Detection</title></head> <body bgcolor="lightgreen"> <font face="arial" size="+1"> <h2>Installed Plugins (Netscape)</h2> <script language="JavaScript"> for ( var i = 0;i < navigator.plugins.length; i++){ document.write ("<br>"+navigator.plugins[i].name+"<br>"); if(navigator.plugins[i].description){ document.write ("<font size='-1'>“ + navigator.plugins[i].description + "<font size='+1'<br>"); } </script> </body> </html>
Navigator Object - ActiveX ActiveX is the Microsoft alternative for plug-ins. ActiveX controls are used as a means to embed objects or components into a Web page. <object> tag takes a set of parameters that specify which data the control should use and define its appearance and behavior.
A Sample of ActiveX Control – example 5 <html> <head><title>ActiveX Example</title></head> <body> <object id="realaudio1" width=0 height=0 classid="clsid:CFCDAA03-8BE4-11CF-B84B-020AFBBCCFA"> <param name="_ExtentX" value="0"> <param name="_ExtentY" value="0"> <param name="AUTOSTART" value="0"> <param name="NOLABELS" value="0"> </object> </body> </html>
Navigator Object– mimeTypes MIME is a standard format for sending mail messages across the Internet. mimeType object are predefined JavaScript objects that allow you to access the mimeTypes[] array, a property of both the navigator object and the plugin object.
Mime detection (Netscape) – example 6 <html> <head><title>Mime Detection</title></head> <body bgcolor="lightgreen"> <font face="arial"> <h2><u>Mime Types (Netscape)</u></h2> <script language="JavaScript"> for ( var i=0; i < navigator.mimeTypes.length; i++){ if(navigator.mimeTypes[i].enabledPlugin != null){ document.write ("<br></em><font size='+2'>" + navigator.mimeTypes[i].type +"<br>"); document.write("<font size='+1'> Enabled Plugin Name: <em>“ + navigator.mimeTypes[i].enabledPlugin.name + " <br>"); document.write("</em>Description: " + "<em>" + navigator.mimeTypes[i].description + "<br></em>Suffixes: " + "<em>" + navigator.mimeTypes[i].suffixes + "<br>"); } </script> </body> </html>
Window Object Is where all the action happens in a browser. Each new page you bring up is a document within the current window. The window is often partitioned into independent display areas, called frames. Window object comes with a number of properties and methods. The name of the window object can be excluded when applying methods to it.
Window Object – open method – example 7 FORMAT: var window_object = window.open(“url”, windowname, [options]); <html> <head><title>Opening a New Window</title> <script language="JavaScript"> function newWindow(){ var winObj=open(“fallscene.jpg", “fall"); } </script> </head> <body bgColor="lightblue"> <h2>Fall Scene from the Old Country</h2> <h3>Click here to see through my fall window<br> <a href="javascript:newWindow()">Fall Scene</a></h3> </body> </html>
Windows Object – Open window with parameters and closing it – example 8 <html> <head><title>Opening a New Window with Parameters and Closing It</title> <script language="JavaScript"> function newWindow(){ winObj=window.open("fallscene.jpg", “fall","width=1150,height=350,resizable=yes,scrollbars=yes"); winObj.focus(); //windObj.blur(); } function closeWindow(){ winObj.close(); </script> </head> <body bgColor="lightblue"> <h2>Fall Scene from the Old Country</h2> <h3>Click the link to see my fall window<br><a href="javascript:newWindow()">Fall Scene</a> <p>When you are ready to close the window, click here<br><a href="javascript:closeWindow()">Close the window</a></h3> </body> </html>
Window object – Moving and resizing a window – example 9 <html> <head><title>Move a New Window</title> <script language="JavaScript"> function directions(){ winObj=window.open("myplace.html","myplace","width=200,height=30,resizable=no"); winObj.moveTo(0, 0); // Move window to top lefthand corner winObj.focus(); parent.window.moveTo(215, 0); // Move the parent window parent.window.resizeTo(400,400); // Resize browser window } function closeWindow(){ winObj.close(); </script> </head> <body bgColor="lightblue"> <h2>We've moved!</h2> For directions to our new place,<br> click the button <form > <input type="button" value="Simple Directions" onClick="directions();"> <p>When you are ready to close the window, click here<br> <a href="javascript:closeWindow()">Close the window</a></h3> </body> </html>
Windows objects - Timed Events – example 10 <head><title>The setTimeout method</title> <script language="JavaScript"> function changeStatusBar(){ window.status = "See me now before I disappear!"; timeout =setTimeout("window.status=''", 6000); // alert(timeout); This value differs in Netscape and IE } </script> <body> <center> <font face=arial size=3 color=blue> The timeout is set for 6 seconds.<br> <img src="alarm.jpg" border=2> <p> Watch the status bar<br> <form> <input type="button" value="click here" onClick="changeStatusBar();"> </form> </center> </body> </html>
Windows objects - Timed Events – example 11 <html> <head> <script language="JavaScript"> var today = new Date(); var future = new Date("December 25, 2003"); var diff = future.getTime() - today.getTime(); // Number of milliseconds var days =Math.floor(diff / (1000 * 60 * 60 * 24 )); // Convert to days var str = "Only " + days + " shopping days left until Christmas!"; function scroller(){ str = str.substring(1, str.length) + str.substring(0,1); document.title=str; window.status=str; setTimeout("scroller()", 300); // Set the timer } </script> </head> <body onLoad = "scroller()"> <b><font color=green size=4> Get Dizzy. Watch the title bar and the status bar!!<br> <image src="christmasscene.bmp"> </body> </html>
Windows objects - Timed Events – example 12 <html> <head><title><Timeout></title> <script language="JavaScript"> var today = new Date(); var future = new Date("December 25, 2003"); var diff = future.getTime() - today.getTime(); // Number of milliseconds var days =Math.floor(diff / (1000 * 60 * 60 * 24 )); // Convert to days var str="Only " + days + " shopping days left until Christmas! "; function startup(){ setInterval("scroller()",500); } function scroller(){ str = str.substring(1, str.length) + str.substring(0,1); document.title=str; window.status=str; </script> </head> <body onLoad = "startup()" bgColor=red> <b><font color=green size=4> Get Dizzy. Watch the title bar and the status bar!!<br> <image src="christmasscene.bmp"> </body> </html>
Windows objects – scrollTo(H,V) – example 13 <html> <head><title>Scrolling through Autumn</title> <script language="JavaScript"> winObj=window.open("fallscene.gif","mysscene", "width=350,height=292,resizable=no"); // Create new window with image. winObj.moveTo(0, 0); winObj.focus(); var pixelpos=0; var ImgWidth=1096; var pixelstep = 2; var timeout; function startScroll(){ if(pixelpos < 0){ pixelpos = 0;} // If the image has scrolled past the end of the window, the position will be negative. if (pixelpos <= (ImgWidth - 350)){ // Check that scrolling is still within the boundaries of the window. pixelpos += pixelstep; winObj.scrollTo(pixelpos,0); // Go to that position in the new window timeout=setTimeout("startScroll()",20); } function scrollAgain(){ clearTimeout(); // Stop timing pixelpos = 0; // Reset the horizontal pixel position to 0 startScroll(); // Start scrolling again function stopHere(){clearTimeout(timeout);} // Stop the clock to stop scrolling function closeWindow(){winObj.close();} </script> </head>
Windows objects – scrollTo(H,V) – example 13 <body bgColor="lightgreen"> <font face="arial" size=4 > <b><br><center> A Window into an Autumn Day <form> <input type="button" value="Start scrolling" onClick="startScroll();"> value="Stop scrolling" onClick="stopHere();"> value="Start over" onClick="scrollAgain();"> </form> <font size=-1> <p>When you are ready to close the window, click here<br> <a href="javascript:closeWindow()">Close the window</a></h3> </body> </html>
Frames Browser is a virtual window that can be divided up into frames within the main window, where each frame is used to display different information. Instead of using <body> tags, you use <frameset> tags. You need at least three files to create frames. The main file defines the frameset. The second file contains the HTML code for the one of the frames and the third file contains the HTML code for the other frame.
Frame Me! – Example 14 <html> <head><title>Frame Me!</title></head> <!-- This file simply defines the frames and points to the files that actually are linked together and have HTML content --> <frameset cols="25%,75%"> <frame src="leftframe.html"> <frame src="rightframe.html"> </frameset> </html>
Frame Me! – Example 14 leftframe.html: <html> <head><title>Left Frame</title></head> <!-- This file is named: leftframe.html --> <body bgColor="yellow"> <h2>Just to show you that this is the left frame</h2> </body> </html> rightframe.html <head><title>Right Frame</title></head> <body bgColor="lightgreen"> <h2>Just to show you that this is the right frame.</h2>
Frame Me! – Example 15 <html> <head><title>Frame Me!</title></head> <!-- This file simply defines the frames and points to the files that actually are linked together and have HTML content --> <frameset rows=“130,*,*” frameborder=“yes” border=“1” framespacing=“0”> <frame src=“topframe.html"> <frame src=“main.html"> <frame src=“bottomframe.html”> </frameset> </html>
Frame Me! – Example 15 topframe.html: <html> <head><title>Top Frame</title></head> <!-- This file is named: topframe.html --> <body bgColor=“lightblue"> <h2>Just to show you that this is the top frame</h2> </body> </html> middleframe.html: <head><title>Middle Frame</title></head> <!-- This file is named: middleframe.html --> <body bgColor=“pink"> <h2>Just to show you that this is the middle frame</h2> bottomframe.html: <head><title>Bottom Frame</title></head> <!-- This file is named: bottomframe.html --> <body bgColor=“gray"> <h2>Just to show you that this is the bottom frame</h2>
The frame object HTML frames are represented as an array of frame objects. the frames[] array is a property of the window object and is referenced with the window’s parent property. Each element of the array represents a frame in the order in which it appears in the document. So, window.parent.frameset[0] would reference the first frame defined in a frameset. You could also refer to the frame with its name. As frames are just little windows, they share many of the same properties and methods of the windows object.
Creating Menus and Navigation Bars Example 16 <html> <head><title>Frame Me!</title></head> <!--Creating the framesets for two files --> <!--This HTML file is named: framedef.html --> <frameset cols="25%,75%"> <frame src="leftmenu.html" name=lframe> <frame src="rightcolor.html" name=rframe> </frameset> </html>
Creating Menus and Navigation Bars Example 17 Left Menu file <html> <head><title>Left Frame</title> <script language="JavaScript"> function setBgColor(color){ parent.frames[1].document.bgColor=color; // or use the frame’s name: parent.rframe.document.bgColor } </script> </head> <body bgColor="white"> <h3> Pick a color:<br> <a href="javascript:setBgColor('red')">red</a><br> <a href="javascript:setBgColor('yellow')">yellow</a><br> <a href="javascript:setBgColor('green')">green</a><br> <a href="javascript:setBgColor('blue')">blue</a> </h3> </body> </html>
Creating Menus and Navigation Bars Example 17 <html> <head><title>Right Frame</title></head> <body> <h2> This is the frame where colors are changing.<br> In your javaScript function, this is frame[1]. </h2> </body> </html>
top property – example 18 <html> <head><title>Forcing the Frame</title> <script language = "JavaScript"> if (window != top) { // True if window is not the top window in the hierarchy top.location.href = location.href; // Put this window on top } </script> <body bgcolor="lightblue"> <h1> The important page that we’re talking about <h2> </body> </html>
Collapsing Toolbars and Menu Bars Example 19 <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset cols="117,450" rows="*"> <frame src="toctoolbar.html" name="menu"> <frame src="tocmain.html" name="main"> </frameset> <noframes> <body bgcolor="#FFFFFF"></body> </noframes> </html>
Collapsing Toolbars and Menu Bars Main file: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor=yellow> <h1>This is the main page</h1> <body bgcolor="#FFFFFF"> </body> </html>
Collapsing Toolbars and Menu Bars Menu file: <html> <head> <title>Toolbar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript"> var myUrl; function openSite(url){ parent.main.location = url; myUrl=url } function collapse(){ if ( ! myUrl){ parent.location = "tocmain.html"; else{ parent.location=myUrl; </script> </head> <body bgcolor="#FFFFFF"> <p><a href="javascript:openSite('tocmain.html')">Home</a><p> <p><a href="javascript:openSite('http://ellieq.com');">Page 1</a></p> <p><a href="javascript:openSite('http://prenticehall.com');">Page 2</a></p> <p><a href="javascript:openSite('http://google.com');">Page 3</a></p> <p><a href="javascript:collapse();">Hide Menu</a><p> </body> </html>
Location Object Property of the window object Used to access the URL of the document currently loaded in the window. The location object can be used to make sure the topmost window is the one currently loaded in the browser. Two methods of interest: replace() and reload().
Changing Location - Example 20 File defining the frameset: <html><title>Changing Location</title> <head><title>Frames</title></head> <frameset rows="130,*" frameborder="yes" border="8" framespacing="0"> <frame src="location.html" scrolling="no"> <frame src="emptyframe.html" > </frameset> </html> Empty Frame: <html> <head><title>Empty Frame</title></head> <body></body>
Changing Location - Example 20 Location File: <html> <head><title>Changing Location</title> <script language="JavaScript"> function loadPage(urlAddress){ parent.frames[1].location.href = urlAddress; } </script> </head> <body bgcolor="F8C473"> <font size="+1" face=arial,helvitica> Pick your book store and we'll take you there! <form name="form1"> <input type="button" value="Amazon" onClick="loadPage('http://amazon.com');"> value="Border's" onClick="loadPage('http://borders.com');"> value="Prentice Hall" onClick="loadPage('http://prenhall.com');"> </form> </body> </html>
The history object Property of the window object. Keeps track of the pages that the user has visited. It has a length property and three methods: go(), back() and forward().
history object - Example 21 <html><title>Changing Location</title> <head><title>Frames</title></head> <frameset rows="130,*" frameborder="yes" border="8" framespacing="0"> <frame src="newlocation.html" scrolling="no"> <frame src="emptyframe.html" > </frameset> </html> Empty frame file: <html> <head><title>Empty Frame</title></head> <body></body>
history object - Example 21 <html> <head> <title>The History Object</title> <script language="JavaScript"> function loadPage(urlAddress){ parent.frames[1].location.href = urlAddress; } </script> </head> <body> <font size="+1" face=ariel,helvitica> <form name="form1"> <input type="button" value="Amazon" onClick="loadPage('http://amazon.com');"> value="Border's" onClick="loadPage('http://borders.com');"> value="Barnes&Noble" onClick="loadPage('http://barnesandnoble.com');"> </form> <form name="form2"> value="go back" onClick="javascript: history.go(-1);"> value="go forward" onClick="javascript: history.go(1);"> </body> </html>
screen object Property of the window object. Automatically created when a user loads a web page.
screen object <html> <head><title>Screen Properties</title></head> <body bgcolor="orange" > <font face=verdana> <script language="JavaScript"> document.write("<b>The Screen</b><br>"); document.write("<table border=2>"); document.write("<tr><th>Screen Property</th><th>Value</tr>"); document.write("<tr><td>Height</th><th>",screen.height,"</td></tr>"); document.write("<tr><td>Available Height</th><th>",screen.availHeight,"</td></tr>"); document.write("<tr><td>Width</th><th>",screen.width,"</td></tr>"); document.write("<tr><td>Available Width</th><th>",screen.availWidth,"</td></tr>"); document.write("<tr><td>Color Depth</th><th>",screen.colorDepth,"</td></tr>"); document.write("</table>"); </script> </body> </html>