1 / 48

Tutorial 5 Windows and Frames Section B - Working with Frames and Other Objects

Tutorial 5 Windows and Frames Section B - Working with Frames and Other Objects. Go to Other Objects. Tutorial 5B Topics. Section B - Working with Frames and Other Objects How to create frames How to use the TARGET attribute How to create nested frames How to format frames

rania
Download Presentation

Tutorial 5 Windows and Frames Section B - Working with Frames and Other Objects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 5Windows and FramesSection B - Working with Frames and Other Objects Go to Other Objects

  2. Tutorial 5B Topics • Section B - Working with Frames and Other Objects • How to create frames • How to use the TARGET attribute • How to create nested frames • How to format frames • About the NOFRAMES tag • About the Location object • About the History object • About the Navigator object • How to reference frames and windows

  3. Working with Frames & Other Objects • Creating Frames • Frame • Independent, scrollable portions of a Web browser window, with each frame capable of containing its own URL • JavaScript treats each frame in an HTML document as an independent window • Each frame has its own Window object

  4. Working with Frames & Other Objects • Creating Frames • <frameset> tag • A frame container • Can only contain <frame> and other <frameset> tags • Others are ignored • Do not use <body> tags

  5. Working with Frames & Other Objects • Creating Frames • Frames can be created in rows, columns or both • <frameset> attributes • ROWS • Determines number of horizontal frames to create • COLS • Determines number of vertical frames to create

  6. Working with Frames & Other Objects • Creating Frames • Frame dimensions • Can be specified in: • Pixels • Absolute sizing • Percentages • Relative sizing • Asterisk (*) designates remainder of visible window

  7. Working with Frames & Other Objects • Creating Frames • <frame> tag • Used to specify options for individual frames • e.g., URLs • Placed within <frameset> tags • Can be assigned a name using the NAME attribute, which can be used as a target for a hyperlink

  8. Working with Frames & Other Objects • Creating Frames • Example: <html> <title><head>Frame Example</head></title> <frameset rows=“50%, 50%” cols=“50%, 50%”> <frame src=“FirstURL.html”> <frame src=“SecondURL.html”> <frame src=“ThirdURL.html”> <frame src=“FourthURL.html”> </frameset> </html>

  9. Working with Frames & Other Objects • Using the TARGET attribute • Menu systems • Popular use of frames • One frame to contain the hypertext links • Second frame to contain selected URLs • TARGET attribute • Determines in which frame or Web browser window a URL opens • <base> tag • Used to specify a default target for all links in a document

  10. Working with Frames & Other Objects • Nesting Frames • Nested frame • Frame contained within another frame • URLs of frames are loaded in the order in which each <frame> tag is encountered

  11. Working with Frames & Other Objects • Nesting Frames • Example: <frameset rows=“50%, 50%” cols=“50%, 50%”> <frame src=FirstURL.html”> <frameset rows=“50%, 50%” cols=“50%, 50%”> <frame src=“FirstURL.html”> <frame src=“SecondURL.html”> <frame src=“ThirdURL.html”> <frame src=“FourthURL.html”> </frameset> <frame src=“ThirdURL.html”> <frame src=“FourthURL.html”> </frameset>

  12. Working with Frames & Other Objects • Nesting Frames • Example: <frameset cols=“200, *”> <frame src=“InstrumentsList.html” name=“list”> <frameset rows=“75%, *> <frame src=“Instruments.jpg” name=“picture”> <frame src=“Welcome.html” name=“description”> </frameset> </frameset>

  13. Working with Frames & Other Objects • Frame Formatting • <frame> attributes • Several attributes are available to change a frame’s appearance and behavior

  14. Working with Frames & Other Objects • Frame Formatting • Example: <frameset rows=“20%, *, 20%”> <frame src=“header.html” noresize scrolling=no> <frame src=“body.html”> <frame src=“navigationbar.html” noresize scrolling=no> </frameset>

  15. Working with Frames & Other Objects • The <noframes> tag • Some older browsers are incompatible with frames • <noframes> tag displays an alternate message to users of those browsers • Example: <frameset rows=“20%, *, 20%”> <frame src=“header.html” noresize scrolling=no> <frame src=“body.html”> <frame src=“navigationbar.html” noresize scrolling=no> </frameset> <noframes> You cannot view… </noframes>

  16. Working with Frames & Other Objects • The Location Object • Allows you to change to a new web page from within JavaScript code • Contains several properties and methods for working with the URL of the document currently open in a Web browser window Go to First Slide

  17. Working with Frames & Other Objects • The Location Object • When you modify any property of the Location object, you generate a new URL • The web browser will then automatically attempt to open that new URL

  18. The Location Object • Example: location.href = “http://www.ithaca.edu” • Will cause the browser to open the ithaca home page

  19. The Location Object • The assign() method is same as the href property: location.assign(“http://www.ithaca.edu”) Will cause the ithaca home page to be loaded in the browser. • The reload() method is same as the reload button • If no argument or argument is false then the page is reloaded only if it has changed • If argument is true then the page will always reload

  20. The Location Object • The replace() method is similar to the href property: location.replace(“http://www.ithaca.edu”) • Difference: replace actually overwrites one document with another • Also replaces the old URL entry in the web browser’s history list. • The href property opens a different document and adds it to the history list.

  21. The Location Object • Example: • Redirect.html

  22. Working with Frames & Other Objects • The History Object • Maintains a history list of all the documents that have been opened during the current Web browser session • Security features • History object will not display the URLs on the list • May traverse the history list using methods/properties • In IE: only allows navigation if page is in same domain

  23. Working with Frames & Other Objects • The History Object Example: <input type="text" Name="newURL"> <input type="button" name="goto" value=" Go To " onClick="parent.main.location.href=document.controls.newURL.value;"> <input type="button" name="next" value=" Next URL " conClick="parent.main.history.forward();"> <input type="button" name="previous" value=" Previous URL " conClick="parent.main.history.back();">

  24. Working with Frames & Other Objects • The Navigator Object • Used to obtain information about the current web browser • Typically used to identify browser

  25. Working with Frames & Other Objects • The Navigator Object • Example: <script language=“javascript”> document.writeln(“Browser code name: “ + navigator.appCodeName); document.writeln(“Web browser name: “ + navigator. appName); document.writeln(“Web browser version: “ + navigator. appVersion); document.writeln(“Operating platform: “ + navigator. platform); document.writeln(“User agent: “ + navigator. userAgent); </script>

  26. Working with Frames & Other Objects • The Navigator Object • Shortcut: with (navigator) { document.writeln(“Browser code name: “ + appCodeName); document.writeln(“Web browser name: “ + appName); document.writeln(“Web browser version: “ + appVersion); document.writeln(“Operating platform: “ + platform); document.writeln(“User agent: “ + userAgent); }

  27. Working with Frames & Other Objects • The Navigator Object • testing: If (navigator. appName == “Microsoft Internet Explorer”) { location.href = “www.ithaca.edu/jbarr/myIE.html”; } Else location.href = “www.ithaca.edu/jbarr/myFireFox.html”;

  28. Working with Frames & Other Objects • The Navigator Object • Example: • NavigatorObjects.html • browserProperties.html

  29. Working with Frames & Other Objects • Referring to Frames and Windows • Frames object • Includes a frames[ ] array that contains all the frames in a window • frames[0], frames[1], etc. • Parent property • Used to refer to a frame within the same frameset • parent.frames[0], parent.frames[1] • Top property • Used to refer to the topmost frame in a frameset

  30. Working with Frames & Other Objects • Referring to Frames and Windows • Example: <frameset rows=“50%, *, 50%”> <frame src=“frame1.html” name=“FirstFrame”> <frame src=“frame2.html” name=“SecondFrame”> </frameset>

  31. Working with Frames & Other Objects • Referring to Frames and Windows • Example: frameReferences.html <P><INPUT TYPE="button" VALUE=" Get thirdFrame's URL " onClick="alert(parent.frames[2].location.href);"></P> <P><INPUT TYPE="button" VALUE=" Get the frame set document's URL " onClick="alert(top.location.href);">

  32. Working with Frames & Other Objects • Preventing frames: • Example: BreakoutCheck.html if (window != top) top.location.href=location.href • Changes the top window content to be the content of the current window

More Related