Windows and Frames - California State University San Marcos
advertisement
Windows and Frames Sahar Mosleh California State University San Marcos Page 1 Frames and the window Object • Frames are a way of splitting up the browser window into various panes, into which we can then load different HTML documents. The frames are defined in a frameset-defining page by the <frameset> and <frame> tags. The <frameset> tag is used to contain the <frame> tags and specifies how the frames should look on the page. The <frame> tags are then used to specify each frame and to include the required documents in the page. • We saw in Chapter 5 that the window object represents the browser’s frame onto your page or document. If you have a page with no frames, there will be just one window object. However, if you have more than one frame, there will be one window object for each frame. Except for the very top-level window of a frameset, each window object is contained inside another. • The easiest way to demonstrate this is through an example in which we create three frames, a top frame with two frames inside it. Sahar Mosleh California State University San Marcos Page 2 • For this multi-frame example, we’ll need to create three HTML files. The first is the frameset-defining page. • Save this as TopWindow.htm. Note that the src attributes for the two <frame> tags in this page are Upperwindow. htm and Lowerwindow. htm. We will create these next. Sahar Mosleh California State University San Marcos Page 3 • This page is the source page for the top frame with the name upperwindow and needs to be saved as Upperwindow. htm. The final page is very similar to this: Sahar Mosleh California State University San Marcos Page 4 • This is the source page for the lower frame; save it as Lowerwindow. htm. • These three pages fit together so that upperwindow. htm and Lowerwindow. htm are contained within the Topwindow . htm page. Sahar Mosleh California State University San Marcos Page 5 • When loaded into the browser, we have three window objects. One is the parent window object and contains the file Topwindow . htm, and two are child window objects, containing the files upperwindow. htm and Lowerwindow. htm. The two child window objects are contained within the parent window, as shown Sahar Mosleh California State University San Marcos Page 6 • if any of the frames had frames contained inside them, these would have window objects that were children of the window object of that frame.When you load Topwindow htm into your browser, you’ll see a series of four message boxes as shown below. Sahar Mosleh California State University San Marcos Page 7 How It Works • Let’s look at the frameset-defining page, starting with Topwindow htm as shown in the following: • The frameset is defined using the <frameset> tag. We use two attributes: rows and ID. The rows attribute takes the value 50%, *!! meaning that the first frame should take up half of the length of the window, and the second frame should take up the rest of the room. The ID attribute is used to give a name that we can use to reference the page. • The two child windows are created using <frame> tags. In each of the <frame> tags, we specify a name by which the window objects will be known and the src attribute of the page that will be loaded into the newly created windows and will form the basis of the document object that each window object contains. Sahar Mosleh California State University San Marcos Page 8 • Let’s take a look at the upperwindow. htm file next. In the <body> tag of the page, we attach a function windowon1oad() to the window object’s onload event handler This event handler is called when the browser has finished loading the window, the document inside the window, and all the objects within the document. It’s a very useful place to put initialization code or code that needs to change things once the page has loaded but before control passes back to the user • This function is defined in a script block in the head of the page as follows: Sahar Mosleh California State University San Marcos Page 9 • The window_onload function makes use of two properties of the window object for the frame that the page is loaded in: its name and parent properties. The name property is self-explanatory-—it’s the name we defined in the frameset page. In this case, the name is upperwindow. • The second property, the parent property, is very useful. It gives you access to the window object of the frame’s parent. This means you can access all of the parent window object’s properties and methods. Through these, you can access the document within the parent window as well as any other frames defined by the parent. Here, we display a message box giving details of the parent frame’s file name or URL by using the href property of the location object (which itself is a property of the window object). • The code for Lowerwindow. htm is identical to the upperwindow. htm, but with different results because we are accessing a different window object. The name of the window object this time is Lowerwindow. However, it shares the same parent window as Upperwindow, and so when we access the parent property of the window object we get a reference to the same window object as we did in upperwindow. The message box demonstrates this by displaying the file name/URL, or href property, and this matches the file name of the page displayed in the Upperwindow frame. Sahar Mosleh California State University San Marcos Page 10 • If you load the example in Internet Explorer and then load it into Netscape browser, you may notice a very important difference and one that highlights the often subtle ways that browsers are incompatible. • In IE, the message boxes for the Lowerwindow object may appear first, meaning that the onload event handler of that window has fired before the onload event handler of the Upperwindow. • However, in Netscape, it’s usually the other way around; the upperwindow object’s onload event handler fires first and then the Lowerwindow object’s event handler fires. • This may not be important here, but there will be times when the order in which events fire is important and affects the working of your code. It’s an incompatibility that’s worth noting and watching out for in your own programs. Note that it would be very risky relying on Netscape loading in one order and IE the other—it can vary, and often for no apparent reason. Sahar Mosleh California State University San Marcos Page 11 Coding between Frames • We’ve seen that each frame exists as a different window and gets its own window object. in addition, we saw that we can access the window object of a frameset-defining page from any of the frame pages it specifies, by using the window object’s parent property. • Once we have a reference to the parent window’s window object, we can access its properties and methods in the same way we access the window object of the current page. in addition, we have access to all the JavaScript variables and functions defined in that page. Sahar Mosleh California State University San Marcos Page 12 Sahar Mosleh California State University San Marcos Page 13 • Notice that the two frames have the src attributes initialized as page_a htm and page_b htm. However, we also need to create page_c htm and page_d htm since we will be allowing the user to choose the page loaded into each frame from these four pages. We’ll create the page_a htm page first, as shown in the following: Sahar Mosleh California State University San Marcos Page 14 Sahar Mosleh California State University San Marcos Page 15 • The other three pages are identical to page_a htm, except for one line, so you can just cut and paste the text from page_a htm. Change the HTML that displays the name of the page loaded to the following: • Then save this as page b htm. • Do the same again, to create the third page (page C): • Save this as page_c htm. Sahar Mosleh California State University San Marcos Page 16 • The final page is again a copy of page_a htm except for the lines • Save this as paged htm. • Load FramesetPage htm into your browser and navigate to various pages by clicking the links. Then click the List Pages Visited button on Page A in the left-hand frame, and you should see a screen similar to the Sahar Mosleh California State University San Marcos Page 17 • Click the links in either frame to navigate the page to a new location. For example, click the Page C link in the right frame, then the Page D link in the left frame. Click the left frame’s List Pages Visited button and you’ll see that page_c htm and page_d htm have been added to the list. • Normally when a new page is loaded, any variables and their values in the previous page are lost, but with framesets it does not matter which page is loaded into each frame—the top frame remains loaded and its variables keep their values. What we are seeing in this example is that, regardless of which page is loaded in each frame, some global variable in the top frame is keeping track of the pages that have been viewed and the top frame’s variables and functions can be accessed by any page loaded into either the left or right frames. Sahar Mosleh California State University San Marcos Page 18 How It Works • Let’s first look at the JavaScript in frameset_page htm, which is the frameset-defining page. The head of the page contains a script block. The first thing we do in this script block is to declare the variable pagesVisited and set it to reference a new Array object. in the array, we’ll be storing the file name of each page visited as the user navigates the site. • We then have two functions. The first of the two functions, returnpagesvisited ( ) , does what its name suggests—it returns a string containing a message and a list of each of the pages visited, it does this by looping through the paqesvisited array, building up the message string inside the variable returnvalue, which is then returned to the calling function. Sahar Mosleh California State University San Marcos Page 19 • The second function, addPage ( ), adds the name of a page to the pagesvisited array. Sahar Mosleh California State University San Marcos Page 20 • The fileName parameter passed to this function is the full file name and path of the visited page, so we need to strip out the path to leave us with just the file name. The format of the string will be something like file: / / /JD: /myDirectory/page_b htm, and we need just the bit after the last / characteL So in the first line of code, we find the position of that character and add one to it because we want to start at the next character. • Then using the substr() method of the String object in the following line, we extract everything from character position fileNameStart right up to the end of the string. Remember that the substr() method takes two parameters, namely the starting character we want and the • length of the string we want to extract, but if the second parameter is missing, all characters from the start position to the end are extracted. We then add the file name into the array, the length property of the array providing the next free index position. Sahar Mosleh California State University San Marcos Page 21 • We’ll now turn to look collectively at the frame pages, namely page_a . htm, page_b htm, page c htm, and page_d htm. In each of these pages, we create a form called formi. • This contains the textarea control that will display the list of pages visited, and a button the user can click to populate the textarea. • When one of these pages is loaded, its name is put into the pagesvisited array defined in frameset page htm by connecting the window object’s onload event handler to the addPage () function that we also created in frarueset page htm. We connect the code to the event handler in the <body> tag of the page as follows: Sahar Mosleh California State University San Marcos Page 22 • Recall that all the functions we declare in a page are contained, like everything else in a page, inside the window object for that page, but because the window object is the global object, we don’t need to prefix the name of our variables or functions with window. • However, this time the function is not in the current page, but in the frameset_page htm page. The window containing this page is the parent window to the window containing the current page. We need, therefore, to refer to the parent frame’s window object using the window object’s parent property. The code window, parent gives us a reference to the window object of framesetpage htm. • With this reference, we can now access the variables and functions contained in frameset_page htm. Having stated which window object we are referencing, we just add the name of the function we are calling, in this instance the addPage () function. We pass this function the location. href string, which contains the full path and file name of the page, as the value for its one parameter. Sahar Mosleh California State University San Marcos Page 23 • As we saw earlier, the button on the page has its onclick event handler connected to a function called butShowVisitectonclick () . This is defined in the head of the page. • in this function we call the parent window object’s returnPagesVisited () function, which, as we saw earlier, returns a string containing a list of pages visited. The value property of the textarea object is set to this text. • That completes our look at the code in the frame pages, and as you can see, there’s not much of it because we have placed all the general functions in the frameset page. Not only does this code reuse make for less typing, but it also means that all your functions are in one place. if there is a bug in a function, fixing the bug for one page also fixes it for all pages that use the function. Sahar Mosleh California State University San Marcos Page 24 • We’ve just seen how a child window can access its parent window’s variables and functions, but how can frames inside a frameset access each other? We saw a simple example earlier in this chapter, so this time let’s look at a much more complex example. Sahar Mosleh California State University San Marcos Page 25 • The easiest way to think of the hierarchy of such a frames-based web page is similar to how you would think of family relationships, which can be shown in a family tree diagram. if we represent our frameset like that, it looks something like. Sahar Mosleh California State University San Marcos Page 26 • From the diagram we can see that fraBottorn, the right-hand frame’s bottom frame, has a parent frame called fraMain, which itself has a parent, the top window. Therefore, if we wanted to access a function in the top window from the frasottorn window, we would need to access fraBottorn’s parent’s parent’s window object. We know that the window object has the parent property, which is a reference to the parent window of that window object. So, let’s use that and create the code to access a function, for example, called myFunction ( ), in the top window. • Let’s break this down. First • Gets us a reference to the parent window object of the window in which the code is running. The code is in fraBottorn, so window, parent will be fraMain. However, we want the top window, which is fraMain’s parent, so we add to the preceding code Sahar Mosleh California State University San Marcos Page 27 • Now we have a reference to the top window. Finally, we call myFunction () by adding that to the end of the expression. • What if we wanted to access the window object of fraMenu from code in fraBottom? Well, we have most of the code we need already. We saw that window, parent. parent gives us the top window, so now we just want that window’s child window object called fraMenu. We can do this in three ways, all with identical results. • We can use its index in the frames[] array property of the window object as follows: Sahar Mosleh California State University San Marcos Page 28 • Alternatively, we can use its name in the frames [] array like this: • Finally, we can reference it directly by using its name as we can with any window object. • The third method is the easiest unless you have a situation where you don’t know the name of a frame and need to access it by its index value in the frames[] array, or perhaps where you are looping through each child frame in turn. Sahar Mosleh California State University San Marcos Page 29 • Since window, parent .parent fraMenu gets us a reference to the window object associated with fraMenu, to access a function myFunction () or variable rnyvariable, we would just type • or • What if we want to access not a function or variable in a page within a frame, but a control on a form or even the links on that page? Well, let’s imagine we want to access a control named rnycontrol, on a form called myForm in the fraMenu page from the fraBottom page. • Basically, it’s the same as how we access a form from the inside of the same page as the script, except that we need to reference not the window object of that page but the window object of fraMenu, the page we’re interested in. Sahar Mosleh California State University San Marcos Page 30 • Normally, we write document myForm mycontrol .value, with window being assumed since it is the global object. Strictly speaking, it’s window, document myForm mycontrol value.Now that we’re accessing another window, we just reference the window we want and then use the same code. So we need • If we want to access the value property of mycontrol from fraBottom. As you can see, references to other frames can get pretty long, and in this situation it’s a very good idea to store the reference in a variable. For example, if we are accessing myForm a number of times, we could write • So that now we can write • Rather than Sahar Mosleh California State University San Marcos Page 31 The top Property • Using the parent property can get a little tedious when you want to access the very top window from a frame quite low down in the hierarchy of frames and window objects. An alternative is the window object’s top property. This returns a reference to the window object of the very top window in a frame hierarchy. In our example, this is top window. For instance, in the example we just saw • could be written as • Although, because the window is a global object, we could shorten that to just • So when should you use top rather than parent, or vice versa? Both properties have advantages and disadvantages. The parent property allows you to specify window objects relative to the current window. The window above this window is window, parent, its parent is window .parent .parent, and so on. The top property is much more generic; top is always the very top window regardless of the frameset layout being used. Sahar Mosleh California State University San Marcos Page 32 • There will always be a top, but there’s not necessarily going to always be a parent .parent. if you put all your global functions and variables that you want accessible from any page in the frameset in the very top window, window, top will always be valid regardless of changes to framesets beneath it, whereas using the parent property is dependent on the frameset structure above it. However, if someone else loads your website inside a frameset page of their own, then suddenly the top window is not yours but theirs, and window, top is no longer valid. You can’t win, or can you? • One trick is to check to see whether the top window contains your page; if not, reload the top page again and specify that your top page is the one to be loaded. For example, check to see that the file name of the top page actually matches the name you expect. The window. top. location. href will give us the name and path—if they don’t match what we want, use window, top. location, replace ( myPagename. htm”) to load the correct top page. However, as we’ll see later, this will cause problems if someone else is loading our page into a frameset she has created—this is where something called the “same origin policy” applies. More on this later in the chapter. Sahar Mosleh California State University San Marcos Page 33 Sahar Mosleh California State University San Marcos Page 34 • As you can see, we’ve reused a lot of the code from frameset_page htm, so you can cut and paste the script block from there. Only the different code lines are highlighted. Save this page as complex_f rameset_page htm. • Next, create the page that will be loaded into fraMenu, namely menupage htm. And save it as menupage htm. Sahar Mosleh California State University San Marcos Page 35 Sahar Mosleh California State University San Marcos Page 36 • The fraMain frame contains a page that is simply a frameset for the fraTop and fraBottom pages. • For the next four pages, we reuse the four pages, page_a. htm, page_b. htm, page_c . htm, and page_d . htm, from the first example. You’ll need to make a few changes, as shown in the following code.Again, all the pages are identical except for the text shown in the page, so only page a . htm is shown. Amend the rest in a similar way. Sahar Mosleh California State University San Marcos Page 37 Sahar Mosleh California State University San Marcos Page 38 How It Works • We’ve already seen how the code in the complex frameset_page htm defining the top window works, as it is very similar to our previous example. However, we’ll just look quickly at the <frameset> tags where, as you can see, the names of the windows are defined in the names of the <frame> tags. • Notice also that the co ls attribute of the <frame set> tag is set to 200, a”. This means that the first frame will occupy a column 200 pixels wide, and the other frame will occupy a column taking up the remaining space. • Let’s look in more detail at the fraMenu frame containing menu_page htm. At the top of the page, we have our main script block. This contains the function choosepage_onchange (), which is connected to the onchange event handler of the select box lower down on the page. The select box has options containing the various page URLs. Sahar Mosleh California State University San Marcos Page 39 • The function starts by defining two variables. One of these, choosePage, is a shortcut reference to the choose Page select object further down the page. • The if. else statement then sets our variable windowobject to reference the window object of whichever frame the user has chosen in the radFrame radio button group. Sahar Mosleh California State University San Marcos Page 40 • As we saw earlier, it’s just a matter of following through the references, so window, parent gets us a reference to the parent window object. In this case, window, top would have done the same thing. Then window, parent . fraMain gets us a reference to the window object of the fraMain frame. Finally, depending on which frame we want to navigate in, we reference the fraTop or fraBottorn window objects contained within fraMain, using window, parent . fraMain. fraTop or window, parent. fraMain. fraBottorn. • Now that we have a reference to the window object of the frame in which we want to navigate, we can go ahead and change its location. href property to the value of the selected drop-down list item, causing the frame to load that page. Sahar Mosleh California State University San Marcos Page 41 • As we saw before, main_page. htm is simply a frameset-defining page for fraTop and fraBot torn. Let’s now look at the pages we’re actually loading into fraTop and fraBot torn. Because they are all the same, we’ll just look at page_a. htrn.Let’s start by looking at the top script block. This contains two functions, butshowVisited_onclick 0 and setFrameAndPageControls ( ) . We saw the function butshowVisited_onclick () in the previous example. • However, because the frameset layout has changed, we do need to change the code. Whereas previously the returnpagesvisited () function was in the parent window, it’s now moved to the top window. As you can see, all we need to do is change the reference from window, parent . returnPagesVisited () to window, top. returnPagesVisited();. • As it happens, in the previous example the parent window was also the top window, so if we had written our code in this way in the first place, there would have been no need for changes here. It’s often quite a good idea to keep all your general functions in the top frameset page. That way all your references can be window, top, even if the frameset layout is later changed. Sahar Mosleh California State University San Marcos Page 42 • The new function in this page is setFrarneAndPageControls ( ) , which is connected to the onclick event handler of the links defined lower down on the page. • This function’s purpose is to make sure that if the user navigates to a different page using the links rather than the controls in the fraMenu window, those controls will be updated to reflect what the user has done. • The first thing we do is set the formobject variable to reference the form1 in the fraMenu page as follows: Sahar Mosleh California State University San Marcos Page 43 • Let’s break this down. • window, parent • gets us a reference to fraMain’s window object. Moving up the hierarchy, we use • window .parent, parent • to get a reference to the window object of the top window. Yes, you’re right. We could have used window. top instead, and this would have been a better way to do it. I’m doing it the long way here just to demonstrate how the hierarchy works. Sahar Mosleh California State University San Marcos Page 44 • Now we move down the hierarchy, but on the other side of our tree diagram, to reference the fraMenu’s window object. • window parent. parent fraMenu • Finally, we are only interested in the form and its controls, so we reference that object like this: • window parent. parent fraMenu document forml • Now that we have a reference to the form, we can use it just as we would if this were code in fraMenu itself. Sahar Mosleh California State University San Marcos Page 45 • The function’s parameter linklndex tells us which of the four links was clicked, and we use this value in the next line of the function’s code to set which of the options is selected in the drop-down list box on fraMenu’s form. • The if. . else statement is where we set the fraMenu’s radio button group radFrame to the frame the user just clicked on, but how can we tell which frame this is? Sahar Mosleh California State University San Marcos Page 46 • We check to see whether the current window object is the same as the window object for fraTop. We do this using the self property of the window object, which returns a reference to the current window object, and window, parent fraTop, which returns a reference to fraTop’s window object. if one is equal to the other, we know that they are the same thing and that the current window is fraTop. if that’s the case, the radFrarne radio group in the fraMenu frame has its first radio button checked. Otherwise, we check the other radio button for fraBottorn. • The last thing we do in the function is return true. Remember that this function is connected to an A object, so returning false cancels the link’s action, and true allows it to continue, which is what we want. return true; Sahar Mosleh California State University San Marcos Page 47 Opening Up a New Browser Window • The window object has an open () method, which opens up a new window, it takes three parameters, although the third is optional, and it returns a reference to the window object of the new browser window. • The first parameter of the open () method is the URL of the page that you want to be opened in the new window. However, if you wish, you can pass an empty string for this parameter and get a blank page, then use the docurnent.write() method to insert HTML into the new window dynamically. We will give an example of this later. • The second parameter is the name we want to allocate to the new window. This is not the name we use for scripting, but instead is used for the target attribute of things such as hyperlinks and forms. For example, if we set this parameter to mywindow and set a hyperlink on the original page to Sahar Mosleh California State University San Marcos Page 48 • then clicking that hyperlink will cause the hyperlink to act on the new window opened. This means that test3.htm will be loaded into the new window and not the current window. The same applies to the <form> tag’s target attribute, which we’ll be looking at in the chapters on server-side JavaScript. in this case, if a form is submitted from the original window, the response from the server can be made to appear in the new window. • When a new window is opened, it is opened (by default) with a certain set of properties, such as width and height, and with the normal browser window features. Browser window features include things such as a location entry field or a menu bar with navigation buttons. Sahar Mosleh California State University San Marcos Page 49 • The third parameter of the open() method can be used to specify values for the height and width properties. Also, since by default most of the browser window features are switched off, we can switch them back on using the third parameter of the open () method. We’ll look at browser features in more detail shortly. • Let’s first look at an example of the code we need to open a basic window. We’ll name this window mywindow and give it a width and height of 250 pixels. We want the new window to open with the test2 htm page inside. • You can see that test2 htm has been passed as the first parameter; that is the URL of the page we want to open. We’ve named the window mywindow in the second parameter. in the third parameter, we’ve set the width and height properties to 250. Sahar Mosleh California State University San Marcos Page 50 • You’ll also notice that we’ve set the variable newwindow to the return value returned by the open() method, which is a reference to the window object of the new window just opened. We can now use newwindow to manipulate the new window and gain access to the document contained inside it using the window, document property. We can do everything with this reference that we did when dealing with frames and their window objects. For example, if we wanted to change the background color of the document contained inside the new window, we would type • How would we close the window we just opened? Easy, we just use the window object’s close() method like this: Sahar Mosleh California State University San Marcos Page 51 • Let’s look at the example we mentioned earlier of a products page where clicking a product brings up a window with details of that product. in a shameless plug, we’ll be using a couple of Wrox books as examples, though, with just two products on our page, it’s not exactly the world’s most extensive online catalog. Sahar Mosleh California State University San Marcos Page 52 Sahar Mosleh California State University San Marcos Page 53 • Save this page as online_books htm. You’ll also need to create two images and name them pro_asp. gif and beg_dreamweaver gif. • Alternatively, you can find these files in the code download. Note that if the user has disabled JavaScript, the window won’t be opened. We can get around this by adding the page details to the href attribute as follows: <a href-”pro asp details.htm” onclick=”return showDetails(this.href);”> <img ... ></a> • We now need to create the two details pages, both plain HTML. Sahar Mosleh California State University San Marcos Page 54 • Save this as pro asp_details .htm. Sahar Mosleh California State University San Marcos Page 55 • Save the final page as beg_dreamweaver_details htm. Sahar Mosleh California State University San Marcos Page 56 How It Works • The files pro_asp_details htm and beg_dreamweaver _details . htm are both plain HTML files, so we won’t look at them. However, in online_books - htm we find some scripting action, which we will look at here. • in the script block at the top of the page, we first define a variable detailswindow. • We then have the function that actually opens the new windows. Sahar Mosleh California State University San Marcos Page 57 • This function is connected to the onclick event handlers of the two hyperlinks surrounding the book images that appear later in the page. The parameter bookURL is passed by the code in the onclick event handler and will be either beg_asp3_details.htm or prof_js_details.htm. • We create the new window with the window, open () method. We pass the bookURL parameter as the URL to be opened. We pass bookDetails as the name we want applied to the new window, if the window already exists, another new window won’t be opened, and the existing one will be navigated to the URL that we pass. • This only occurs because we are using the same name (bookDetails) when opening the window for each book. if we used a different name, a new window would be opened. Sahar Mosleh California State University San Marcos Page 58 • By storing the reference to the window object just created in the variable detailswindow, we can access its methods and properties. On the next line, you’ll see that we use the window object, referenced by detailswindow, to set the focus to the new window otherwise it will appear behind the existing window. • Finally, we need to return false so that the normal action of the hyperlink is canceled. • Although it’s the user’s action of clicking the images that we’re interested in, we need to wrap the images in a hyperlink tag and use the onclick event associated with the A object because under Netscape 4 img objects don’t have an onclick event handler You can see this in the following code, where we create the images and hyperlinks and connect the onclick event handlers to our function. Although we are using the same function for each of the links’ onclick event handlers, we pass a different parameter, namely the URL of the details page for that book. Sahar Mosleh California State University San Marcos Page 59 Sahar Mosleh California State University San Marcos Page 60 Adding HTML to a New Window • We mentioned earlier that we can pass an empty string as the first parameter of the window object’s open () method and then write to the page using HTML. Let’s see how we would do that. • First, we need to open a blank window by passing an empty value to the first parameter that specifies the file name to load. • Now we can open the window’s document to receive our HTML. • This is not essential when a new window is opened because the page is blank, but with a document that already contains HTML, it has the effect of clearing out all existing HTML and blanking the page, making it ready for writing. Sahar Mosleh California State University San Marcos Page 61 • Now we can write out any valid HTML using the document write () method. • Each time we use the write () method, the text is added to what’s already there until we use the document, close () method. • If we then use the document.write () method again, the text passed will replace existing HTML rather than adding to it. Sahar Mosleh California State University San Marcos Page 62 Adding Features to Your Windows • As we have seen, the window.open () method takes three parameters, and it’s the third of these parameters that we’ll be looking at in this section. Using this third parameter, you can control things such as the size of the new window created, its start position on the screen, whether the user can resize it, whether it has a toolbar, and so on. • Features such as menu bar, status bar, and toolbar can be switched on or off using yes or 1 for on and no or 0 for off. To switch them on, we can also just include their name without specifying a value. • The list of possible options shown in the following table is not complete, and not all of them work with both IE and NN browsers. Sahar Mosleh California State University San Marcos Page 63 Sahar Mosleh California State University San Marcos Page 64 • As mentioned earlier, this third parameter is optional. If you don’t include it, all the window features default to yes, except the window’s size and position properties, which default to a set position and size. For example, if you try this code: Sahar Mosleh California State University San Marcos Page 65 Sahar Mosleh California State University San Marcos Page 66 • set to no by default. For example • However, if you specify even one of the features, all the others (except size and position properties) are • produces a window with no features, as shown in Figure 7-11, although we have defined its size this time. The larger window is the original page, and the smaller one on top is the popup window. Sahar Mosleh California State University San Marcos Page 67 • Let’s see another example. The following creates a 250-by-250-pixel window, with a location and menu bar, and is resizable. • A word of warning, however: Never include spaces inside the features string; otherwise Netscape browsers will consider it invalid and ignore your settings. Sahar Mosleh California State University San Marcos Page 68 Scripting between Windows • We’ve taken a brief look at how we can manipulate the new window’s properties and methods, and access its document object using the return value from the window, open () method. Now, we’re going to look at how the newly opened window can access the window that opened it and, just as with frames, how it can use functions there. • The key to accessing the window object of the window that opened the current window is the window object’s opener property. This returns a reference to the window object of the window that opened the current window. So • will change the background color of the opener window to red. We can use the reference pretty much as we used the window, parent and window, top properties when using frames. Sahar Mosleh California State University San Marcos Page 69 Let’s look at an example where we open a new window and access a form on the opener window from the new window: Sahar Mosleh California State University San Marcos Page 70 Sahar Mosleh California State University San Marcos Page 71 • This is the code for our original window. Save it as openerwindow. htm. Now we’ll look at the page that will be loaded by the opener window. Sahar Mosleh California State University San Marcos Page 72 • Open openerwindow. htm in your browser, and you’ll see a page with the simple form shown in bellow • Click the Open newwindow button, and you’ll see the window original page. Sahar Mosleh California State University San Marcos Page 73 • Type something into the text box of the new window. Then return to the original opener window, click the Get Text button, and you’ll see what you just typed into newwindow appear in the text box on the opener window’s form. • Change the text in the opener window’s text box and then return to the newwindow and click the Get Text button. The text you typed into the opener window’s text box will appear in newwindow’s text box. Sahar Mosleh California State University San Marcos Page 74 Moving and Resizing Windows • Before we leave the subject of windows, let’s look at the methods available to us for resizing and moving existing windows. Note that Netscape 6/7 can be configured to not allow scripts to resize or move existing windows. • Once you have opened a window, you can change its position onscreen and its size using the window object’s resizeTo () and moveTo() methods, both of which take two arguments in pixels. • Let’s imagine, having just opened a new window, like this: • that you want to make it 350 pixels wide by 200 pixels high and move it to a position 100 pixels from the left of the screen and 400 pixels from the top. What code would you need? Sahar Mosleh California State University San Marcos Page 75 • You can see that we can resize our window to 350 pixels wide by 200 pixels high using resizeTo (). Then we move it so it’s 100 pixels from the left of the screen and 400 pixels from the top of the screen using moveTo().The window object also has resizeBy () and moveBy () methods. These each take two parameters, in pixels. For example • will increase the size of newwindow by 100 pixels horizontally and 200 pixels vertically. Similarly • will move the newwindow by 20 pixels horizontally and 50 pixels vertically. When using these methods, you must bear in mind that users can manually resize these windows if they so wish. In addition, the size of the client’s screen in pixels will vary between users. Sahar Mosleh California State University San Marcos Page 76 Security • Browsers, such as Netscape Navigator and Internet Explorer, put certain restrictions on what information scripts can access between frames and windows. • If all the pages in these frames and windows are based on the same server, or on the same computer when you’re loading them into the browser locally as we are, you have a reasonably free rein over what your scripts can access and do. • However, there are some restrictions. For example, if you try to use the window, close () method in a script page loaded into a browser window that the user opened, as opposed to a window opened by your script, a message box will appear giving the user the option of cancelling your close 0 method and keeping the window open. Sahar Mosleh California State University San Marcos Page 77 • When a page in one window or frame hosted on one server tries to access the properties of a window or frame that contains a page from a different server, the “same origin policy” comes into play, and you’ll find yourself very restricted as to what your scripts can do. • Imagine you have a page hosted on a web server whose URL is http: / /www.myserver.com. Inside the page is the following script: • Now we have two windows, one that is hosted at www.myserver. com and another that is hosted on a different server, www. anotherserver.com. Although this code does work, the same origin policy prevents any access to the document object of one page from another For example, the following code in the opener page Sahar Mosleh California State University San Marcos Page 78 • will cause a security problem and will be prevented by the browser Although you do have access to the window object of the page on the other server, you only have access to a limited subset of its properties and methods. • The same origin restriction applies equally to frames as it does to windows. The idea behind it is very sound: it is to prevent hackers from putting your pages inside their own and extracting information by using code inside their page. However, the restrictions are fairly severe, perhaps too severe, and mean that you should avoid scripting across frames or windows where the pages are hosted on different servers. • There is no easy way around the restrictions in Internet Explorer, but Netscape Navigator browsers do support scripts that have been digitally signed to validate their origin. These scripts suffer less restriction than unsigned scripts, but it does mean that your pages won’t be accessible from Internet Explorer Also, the certificate required for signing is quite expensive. Sahar Mosleh California State University San Marcos Page 79
