New Perspectives on DHTML, 2e

1
Working with Windows and Frames

• DHTML Tutorial 5Enhancing a Web Site with
  Interactive Windows

2
Objectives

• Modify the appearance and behavior of browser
  windows
• Create messages that appear in the browser's
  status bar
• Automatically redirect your Web browser to new
  Web pages
• Create pop-up windows and modify their contents
• Work with the appearance, content, and behavior
  of frames and framesets

3
Working with the Window Object

• The four main pages of the iMusicHistory home
  page
• A home page, describing the purpose and features
• A Lessons page, containing an interactive lesson
• A Quiz page, containing an online quiz
• A Glossary page, containing musical terms

4
Working with the Window Object

• To create status bar messages, work with
  properties of the window object

5
Working with the Window Object
6
Modifying the Status Bar Message

• Status bar messages are either permanent or
  transient
• A permanent status bar message appears in the
  status bar by default and is usually blank
• A transient status bar message appears in
  response to specific events that occur within the
  browser

7
Creating a Status Bar Welcome Message for
iMusicHistory

• To modify the permanent status bar
  messagewindow.defaultStatus message
• Changing this property can interfere with
  download progress messages
• If downloading files is not an issue, you may use
  the property without concern
• To create the iMusicHistory welcome
  messageonLoadwindow.defaultStatusWelcome
  to iMusicHistory(www.imusichistory.com)

8
Creating Status Bar Messages for the
iMusicHistory Hyperlinks

• Function to modify the transient status bar
  messagefunction showStatus(msg)
  window.statusmsg return true
• Function callonMouseOverreturn showStatus(Go
  to the iMusicHistory home page)
• To remove a transient messageonMouseOutreturn
  showStatus( )

9
Working with the History and Location Objects

• The location object contains information about
  the page that is currently displayed in the
  browser
• The history object holds a list of the sites the
  Web browser has displayed before reaching the
  current page

10
Moving Forward and Backward in the History List

• To move backward history.back()
• To move forward history.forward()
• As a hyperlink lta hrefjavascripthistory.back()
  gtBacklt/agt

11
Moving Forward and Backward in the History List

• Use the go() method to move to a specific
  pagehistory.go(integer)
• Where integer represents a particular page
• Positive numbers move forward
• Negative number move backward
• Zero loads current page

12
Automatic Page Navigation

• Two methods of automatic page navigation
• Add a command to the ltmetagt tag
• Use a JavaScript program to redirect
• Combine both since JavaScript is not supported by
  all browsers

13
Automatic Page Navigation

• To redirect a page using the ltmetagttagltmeta
  http-equivRefresh contentsec URLURL /gt
• Where sec is the time in seconds before the page
  loads
• Where URL is the new page to be loaded
• The time may be set to 0 so user does not detect
  redirection

14
Automatic Page Navigation

• To redirect a page using JavaScriptwindow.locati
  on.href URL
• Where URL is the new page to be loaded
• To add a delay, use setTimeout()setTimeout(wind
  ow.location.href URL , msec)
• Where msec is the delay time in milliseconds

15
Security Issues

• Netscape history object also supportshistory.cur
  renthistory.previoushistory.nextdocument.referr
  er
• These properties require a signed script in order
  to access this information

16
Creating New Browser Windows
17
Opening New Windows with HTML

• To open a page in a new windowlta hrefURL
  targetWindowNamegt text lt/agt
• Where URL is the URL of the page to be loaded
  into a new browser window
• Where WindowName is the name of the secondary
  window
• You may reuse the same WindowName to replace
  contents in an already opened window

18
Opening New Windows with JavaScript

• Using JavaScript to open a new window provides
  greater flexibility and more options
• To create a new window with JavaScriptwindow.ope
  n(URL, WindowName, FeatureList)
• Where URL is the URL of the page to be displayed
  in the window
• Where WindowName is the target name of the window
• Where FeatureList is a list of features that
  control appearance and behavior of the window

19
Working with Window Features
20
Working with Window Features

• Chrome is all browser features outside the
  document window
• Choose features by creating a features
  listFeature1value1,Feature2value2,
  FeatureNvalueN
• Only a comma (not a comma and space) separates
  each of these pairs

21
Working with Window Features

• Without a feature list, chrome features and size
  of current browser window are used
• With a feature list, the new window follows these
  rules
• When width or height are not specified, the width
  or height of the browser window is used
• If a chrome feature is not listed, that feature
  will not appear in the window

22
Working with Window Features

• To display the directory buttons, location box,
  menu bar, scroll bar, status bar, or toolbar, add
  the featuresdirectoriesvalue,locationvalue,me
  nubarvalue,scrollbarsvalue,statusvalue,toolbar
  value
• Where value is either yes (to show the feature)
  or no (to hide the feature)

23
Working with Window Features

• To define width and heightwidthx,heighty
• For security reasons, you cannot create a window
  less than 100x100 pixels
• To set the screen positionleftx,topy

24
Adding a Pop-up Window to the iMusicHistory Site
25
Working with Multiple Windows

• Use JavaScript to control the interaction between
  browser windows
• Specify which window has focus
• Remove focus from one window and give it to
  another
• Allow users to move and resize windows
• Automatically close windows

26
Window Methods
27
Window Methods
28
Window Methods

• To give the focus to a windowWindowObject.focus(
  )
• To remove the focus from a windowWindowObject.bl
  ur()
• To close a windowWindowObject.close()
• Where WindowObject is the name of the window

29
Window Methods

• To move the window, use eitherWindowObject.moveB
  y(dx, dy)WindowObject.moveTo(x, y)
• Where dx and dy are the distance in pixels to
  shift
• Where x and y are coordinates on the screen

30
Window Methods

• To resize the window, use eitherWindowObject.res
  izeBy(dx, dy)WindowObject.resizeTo(x, y)
• Where dx and dy are the increase in width and
  height of the window
• Where x and y are the width and height of the
  window

31
The Self and Opener Windows

• Use the window name to keep track of windows
• Or use the keywords self and opener
• The self keyword refers to the active window
• self.close() is equivalent to window.close()
• The opener keyword refers to the window or frame
  that opened the current window
• opener.close() would close the window that
  opened the secondary window

32
Writing Window Content for the iMusicHistory Quiz

• Modal window prohibits the user from doing
  anything else, such as the alert box
• Modeless window allows the user to work with
  other applications and perform other actions

33
Using the document.write() Method

• The document.write() method allows you to write
  new content to a browser window.
• To specify which window, name the window
  objectWindowObject.document.write(Content)Wi
  ndowObject.document.close()

34
Modal and Modeless Windows with Internet Explorer

• Beginning with IE 4.0, you can create a modal
  windowReturnValuewindow.showModalDialog(URL,
  WindowName, FeatureList)
• Beginning with IE 5.0, you can create a modeless
  windowReturnValuewindow.showModelessDialog(URL
  , WindowName, FeatureList)
• Both methods provide options for a features list

35
Working With Frames
36
Working With Frames
37
Working With Frames

• To identifying frames in HTML, use the name
  property
• To identifying frames in JavaScript, use the id
  property
• For more clear code, apply the same name using
  both id and name propertiesltframe idTop
  nameTop srcHome.htmgt

38
Working with the Frame Object

• Each frame is a member of the frames collection
• Frames may be referenced by the index number of
  the frameWindowObject.framesi
• Frames may also be referenced by the id value
  using either syntaxWindowObject.framesidWin
  dowObject.id

39
The Top and Parent Windows

• parent the object immediately above the current
  object in the DOM
• top the object at the top of the DOM, in the
  case of frames this is the topmost frameset

40
Working with Frames As Windows

• All three DOMs allow you to treat frames as
  windows within windows
• Consequently, many of the window methods and
  properties may be applied to frames
• To change the frames source documentFrameObject
  .location.href URL
• To write to the frameFrameObject.document.write(
  Content)FrameObject.document.close()

41
Formatting the Appearance of a Frame

• The IE and W3C DOMs let you format the frames
  appearance

42
Formatting the Appearance of a Frame
43
Formatting a Frameset

• The IE and W3C DOMs let control the behavior and
  appearance of the entire frameset
• For IEWindowObject.id
• For W3CWindowObject.document.getElementById(id
  )
• Where id is the id property value for the frameset

44
Formatting a Frameset
45
Blocking Unwanted Frames

• Other sites may open up your entire web page
  within one of their frames
• You can prevent this from happening through
  JavaScript

46
Blocking Unwanted Frames

• The following code will check whether the web
  page is opened within another frame
• If it is, then the page will be jump to the top
  of the hierarchy and replace the frameif
  (top.location.href ! self.location.href)
  top.location.href self.location.href

47
Forcing Pages into a Frameset

• You can use similar code to force the display of
  pages into a framesetif (top.location.href
  self.location) top.location.href URL

48
Review

• Use window properties to modify the appearance
  and behavior of browser windows
• Create messages that appear in the browser's
  status bar using the defaultStatus and status
  window properties
• Use the ltmetagt tag and window.location.href
  property to automatically redirect your Web
  browser to new Web pages

49
Review

• Use window.open() to create pop-up windows and
  modify their contents
• Work with frame and frameset properties to modify
  the appearance, content, and behavior of frames
  and framesets