Section 9.3. Frames and Location
9.3. Frames and LocationI must admit up front that I'm not fond of frames. Yes, they are extremely useful, and still a terrific way to manage applications in which an action in the left window (or top window) can trigger a change in the right (or bottom). Each can then scroll separately, without any effort on our part. However, too many companies had (or still have) a habit of opening up other web sites into frames, which basically wrapped the other site's content in their own environment. Most of us didn't care for this. Luckily, thanks to JavaScript, we can defeat this technique using a second window object, location. The location object stores information about the current location and provides a small set of routines to load a new document or replace whichever document is currently loaded. The frame object has a few properties and methods, and is primarily a subset of the window object. This makes sense considering that each is a window, in miniature. Among the objects supported are frames, name, length, parent, and self. The methods supported are blur, focus, setInterval, clearInterval, setTimeout, and clearTimeout. Of these, the ones new to this example are parent, which would be the parent frameset, length for length of frame, and name, which is the frame name. The name and parent are particularly important for cross-frame communication. A parent frameset can access each child frame through its name (or through the frames array using the number of the object as an index); each frame can access the frameset tHRough the generic term, parent. Siblings can access each other by accessing parent and then the name of the sibling. In Example 9-5, a frameset with two frames is loaded. The two frames are known as framea and frameb. Example 9-5. Frameset loading two frames
Into framea, a document, framea.htm, is loaded. It has one link that, when pressed, accesses its sibling through its parent and changes the frame location to itself. The page for this is shown in Example 9-6. The second frame document, frameb.htm, has the exact same page, except it steals framea's spot for itself. Example 9-6. Each frame loading itself
The individual frame pages load themselves using the location's replace method. 9.3.1. More On LocationThe location object's properties are all related to the page location. You've seen one of its functions, replace, used to replace the page for one of the frames. Another is reload, which instructs the browser to refresh the document. It also has properties associated with the page location, including the domain, port, and protocol, that are used with location; these are given in Table 9-2.
Accessing a URL such as the following: http://learningjavascript.info/ch09-01.htm?a=1 results in the following property values: host/hostname: learningjavascript.info protocol: http: search: ?a=1 href: http://learningjavascript.info/ch09-01.htm?a=1 Returning to the initial issue about frames, and your pages being loaded into them without your permission, use the location objectin conjunction with a few other odds and endsto defeat this technique. Example 9-7 shows another frameset; this one loads frames named frameone and frametwo. Example 9-7. Loading two frames
Neither frame1.htm nor frame2.htm is of much interest. The frametwo page has a link to another page, called noway.htm, which has the interesting bits, repeated in Example 9-8. Example 9-8. Preventing opening in frameset
In the newly opened page, which normally opens into the frame, there's a script block that tests whether it is, itself, the top window. In framed windows, the frameset is the top window. In the code, if the window is not the top window (is loaded into a frame), it sets the top-window location href property to itselfeffectively bumping the frameset out of the way. Simple and clean. However, you'll find few pages that frame-protect themselves nowadays. Frames just aren't as popular as they once were, and most people don't want to add anything unnecessarily to their pages. Not all frames require a frameset parent. The iframe can be embedded in a page, rather than a frameset. 9.3.2. Remote Scripting with the iframeAjax achieved almost instant fame through its promotion of in-page client/server interaction. This is a process in which data can be submitted to a server and a page updated without having to reload the page. This was all shiny new, though the technology had been around for a few years. Even before Ajax and its MS precursor, there were ways to implement remote-server functionality. One popular method was to use the HTML element, the iframe, and a concept of remote scripting.
Unlike regular frames, an iframe is actually embedded within a page. It can be given both height and width to be displayed, or it can be hidden by setting both to zero. It considers the page it's embedded in as its parent, and that's how it communicates with the higher-level page. Normally, it can be accessed by using the document's getElementById; you can also load content into it using the target attribute in a link. In Example 9-9, an iframe is embedded in the page, with text about making a choice between the red pill or the blue. Each of these is a link, which will load the choice page into the iframe. Example 9-9. Communicating with an embedded iFrame
Note in the onclick event handlers that the last statement in the JavaScript is a return statement returning a value of false. This prevents the default behavior of the linkwhich is to load the pagefrom being initiated. The page also includes a script block that writes the string passed as a parameter to the iframe page. This, in turn, is passed in from either of the choice pages, the first of which is shown in Example 9-10. Example 9-10. One of the pages loaded into the iframe
Note that the page and the embedded page share the same parent. One of the advantages to using the iframe for server communication is that it doesn't require any expertise with more esoteric communication mechanisms such as XML-RPC. The limitation is that there is no formalized API method for invoking services. All functionality is based more on pages loaded, and JS script processes. Also, unlike other remote-scripting options, the history of options is maintained. In other words, the browser maintains state between choices. |
EAN: 2147483647
Pages: 151