WEB150 » Week 04: Lecture – BOM+Debugging
BOM - Browser Object Model
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
New windows (popups and other windows) can be opened using the window.open() method:
window.open( "http://twitter.com/antic", "popup", "height=500,width=700 );
Notice that the above accepts three arguments:
- The URL of the page to be opened
- The name of the new window
- A comma separated list of the properties of the new windows.
If the third argument is left empty, the newly opened window will, most likely, look like the parent window, and may open in a new tab if your browser uses a tabbed interface. Tizag has more info on the 3rd argument properties
Note that Popup blockers can effect whether or not a new window will open and how it will work
You can maintain a reference to an opened window like this:
// maintain a reference to an opened window var jsWindow = window.open( "http://twitter.com/antic", "popup", "height=500,width=700 ); // so we can reference it to close it jsWindow.close();
The methods focus() and blur() make the window referred to active and foremost as well as inactive and hidden, respectively.
There are several methods available to windows including:
The location object holds data for the URL for the current page. This object has eight properties.
The location object can be called using the form
In Class Demo Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
Advanced Reading (Optional)
Getting Information about the Current Page
Using the window.location property, you can get information about all the different parts of the current web page URL (including hash ID references). Here are the results of accessing the eight properties of the page: http://www.jsdesk.com:8080/search.php?query=onload#results
The location object also has two methods
- Forces a reload of the window's current document.
- Loads the specified URL over the current history entry.
It may not be immediately apparent but although
window.location.replace() appear to have the same purporse There is one major difference. If you change the value of window.location.href or call the
window.location.replace() method in the following manners:
window.location.href = "http://sccc.jsdesk.com"; window.location.replace("http://sccc.jsdesk.com");
The difference is that
window.location.href acts like a user clicked a link. The
window.location.replace overwrites the page from which the function was called in the history.
This object maintains a history of the pages loaded into the browser as found in the history cache. These methods and properties do not work well with Ajax.
- Loads the previous web page into the browser.
- Loads the next web page into the browser.
- Load the web page that is however many pages away from the current page. If the argument is negative, the page loaded is back in history; if it is positive, the page loaded is forward in history.
- The web page as a string previous to the current one, if it exists.
- The web page as a string for the current page displayed in the browser.
- The web page as a string for the one following the current page, if it exists.
- The number of pages stored in the history cache.
Cookies are set as follows:
document.cookie = "testcookie=yes; expires=Tue, 29 Jan 2008 13:57:39 UTC; path=/; domain=jsdesk.com";
The code above creates a cookie with the name testcookie and the value of yes that will be valid until January 29, 2008 in all directories of jsdesk.com and all it's subdomain.
It is always to include all of the above options to ensure that your cookies work cross browser. The above code is very precise not the semicolons and spaces that separate the various arguments and the strict form of the expiration date
Cookies are read in the following manner
document.cookie = "testcookie=yes; expires=Tue, 29 Jan 2008 13:57:39 UTC; path=/; domain=jsdesk.com"; document.cookie = "testcookie2=maybe; expires=Tue, 29 Jan 2008 13:57:39 UTC; path=/; domain=jsdesk.com"; alert(document.cookie;)
The above returns a string consisting of all the name value pairs of the various cookies. For this example the string is "testcookie=yes;testcookie2=maybe" will popup in an alert box.
In order to make cookies at all useful you will have to do some string manipulation in order to extract the name value pairs into something that is useful. We will learn more about string manipulation in Week 6
Cookies are deleted by setting the expiration date to the past:
document.cookie = "testcookie=yes; expires=Tue, 29 Jan 2000 13:57:39 UTC; path=/; domain=jsdesk.com";
- Firebug video tutorial
- Window complete reference just skim this to see all of the properties ane methods of the window object. We won't have time to cover it all, so it's best at least to be familiar with the other things that are available to you
- W3Schools: onerror