For various reasons, having a frame-based website can prove very useful. Therefore, we need to be able to create JavaScript that can interact with frames and with the documents and code within those frames.
We saw that an advantage of frames is that, by putting all of our general functions in a single frame, we can create a JavaScript code module that all of our website can use.
We saw that the key to coding with frames is getting a reference to the window objects of other frames. We saw two ways of accessing frames higher in the hierarchy, using the window object's parent property and its top property.
The parent property returns the window object that contains the current window object, which will be the page containing the frameset that created the window. The top property returns the window object of the window containing all the other frames.
Each frame in a frameset can be accessed using three methods. One is by using the name of the frame. The second is by using the frames[] array and specifying the index of the frame. A third way is to access the frame by its name in the frames array, for example, parent.frames.frameName. This is even safer because it avoids any collision with global variables.
If the frame we want to access is defined in another window, we need to get a reference to the window object defining that frame, using the parent or top properties, and then we must specify the name or position in the frames[] array.
We then looked at how we can open new, additional browser windows using script.
Using the window object's open() method, we can open new windows. The URL of the page we want to open is passed as the first parameter, the name of the new window as the second parameter, and the optional third parameter allows us to define what features the new window will have.
The window.open() method returns a value, which is a reference to the window object of the new window. Using this reference, we can access the document, script, and methods of that window, much as we do with frames. We need to make sure that the reference is stored inside a variable if we want to do this.
To close a window we simply use the window.close() method. To check if a window is closed, we use the closed property of the window object, which returns true if it's closed and false if it's still open.
For a newly opened window object to access the window that opened it, we need to use the window.opener property. Like window.parent for frames, this gives a reference to the window object that opened this one and allows us to access the window object and its properties for that window.
Once a window is opened, we can resize it using resizeTo(x,y) and resizeBy(x,y), and move it using moveTo(x,y) and moveBy(x,y).
We also looked briefly at security restrictions for windows and frames that are not of the same origin. By not of the same origin, we mean the situation where the document in one frame is hosted on one server and the document in the other is hosted on a different server. In this situation, very severe restrictions apply, which limit the extent of scripting between frames or windows.
In the next chapter, we'll be looking at advanced string manipulation and how we can use this to add different types of questions to our trivia quiz.