1. Programming the Web using XHTML and JavaScript
Chapter 17
JavaScript with Frames and Windows

2. Frames

3. Dynamic Content with Frames
CyberPizza example
Two side-by-side frames
Left – pizza order choices
Right – display order
Requires three documents
CyberPizza.html – the frameset document
SelectPizza.html – code for left frame
DisplayChoices.html – code for right frame
Welcome to …
Your pizza …

4. Dynamic Content with Frames
CyberPizza.html
Establishes the frameset
Defines functions (more on that later)
SelectPizza.html
Defines 3 forms
Toppings
Crusts
Submit order
DisplayChoices.html
Show results from choices on SelectPizza

5. Dynamic Content with Frames
Problem
Left and right frames involve two separate documents
Functions declared in a document act only in the frame containing that document
How can we call a function from one document that acts on a different frame?

6. Dynamic Content with Frames
Answer:
Ensure that both documents are simultaneously present in different frames of the frameset
Since the code is “present” it can be called
Where to put the code?
In a frame that’s always loaded
The frameset document
CyberPizza.html

7. Dynamic Content with Frames
How do you call a function declared in a different document?
Using the hierarchical dot notation
CyberPizza.html
“frameset” document
aka “parent”
SelectPizza.html
Document
in left frame
DisplayChoices.html
Document
in right frame

8. Dynamic Content with Frames
The document that establishes a frameset is considered to be the “parent” of the documents that define the individual frames
Thus, to refer to a function called displayOrder in the parent we use
parent.displayOrder(…)

9. Dynamic Content with Frames
The displayOrder function
Must be able to
Read user-selected data from the left frame
Update the right frame with selected information
If the user changes the order, displayOrder must be able to update the right frame with the latest data

10. Dynamic Content with Frames
This means that the displayOrder function has to be able to:
Write data
To a specific frame
Writing data is accomplished with the write method of the document object:
document.write()

11. Dynamic Content with Frames
The data written is specified as a parameter
document.write(“Hello world”)
Remember this example?
Ch17-Ex-01

12. Dynamic Content with Frames
If writing to a different document, specify the destination:
rightFrame.document.write(…)

13. Dynamic Content with Frames
HTML tags and data can be included
This means that a script can change the document content dynamically
Ch17-Ex-02

14. Dynamic Content with Frames
And variables can be used…
Ch17-Ex-03

15. Dynamic Content with Frames
Meanwhile, back at the displayOrder function in CyberPizza.html …
Before writing to a document it must be opened
document.open()
document.write() does the open automatically
Close the document when all done
Finishes the writing process to the document
document.close()

16. Dynamic Content with Frames
The Document Output Stream (DOS)
document.write() only works when the browser is loading an HTML source document
Document is implicitly opened during loading
Browser opens the “document output stream”
Starts interpreting the HTML
Places the information/data on the screen
Once the document is loaded the document is automatically closed
Therefore this shouldn’t work properly:
Ch17-Ex-04.html
Look at:
Status button
Source while still open
Note what closing the document does:
Ch17-Ex-04a.html

17. Dynamic Content with Frames
The Document Output Stream (cont.)
Once the document contents have been displayed
DOS is closed
When the DOS is closed
document.write() method cannot be used
This means that write() cannot be used in conjunction with a form in the same document without completely replacing the current document

18. (not the operating system)
Windows

19. Manipulating Windows
In Chapter 6 we showed how to open a document in a new browser window:
<a href=" target="fred">
Click here to open page in a new window.
Ch06-Ex-11

20. Manipulating Windows
Can open a window using the open() method of the window object:
var sampleWindow = window.open( “
“testWin”,
“width=250,height=200,left=100,top=60”)
Name given to new window object (used in JavaScript)
Name of HTML source document to be opened (URL)
Name for use by target
Window features (in pixels

21. Manipulating Windows
The close() method can be used to close a window if its name is known
Ch17-Ex-05

22. if (sampleWindow.closed) …
Manipulating Windows
Windows have more than 40 methods and 50 properties (Appendix F)
if (sampleWindow.closed) …
sampleWindow.open(…)
There are over 25 windows features
height, width, top, left
toolbar, scrollbars, resizable, …

23. Manipulating Windows If you leave out the third parameter
var sampleWindow = window.open(“
a default window is created
However, if you specify any value in the third parameter, all unspecified values are considered to be “off”

24. CyberPizza Here is the CyberPizza example: CyberPizza.html
View all the source before and after submission
Use this code as a basis for HW PTW17!

25. Security Concerns
What security hazards do you see here?

26. Assignment Implement and improve the CyberPizza problem
Note changes specified in the Assignments Web Page