elements above has the same
attribute (or if one element has a
another element has an
with the same value), the implicit global variable with that
name will refer to an array-like object that holds each of the named elements.
There is a special case for
elements with a
attribute. The implicitly
created variable for these elements refers not to the Element object that represents the
element itself, but to the Window object that represents the nested browser frame
created by the
element. We’ll talk about this again in §14.8.2.
14.8 Multiple Windows and Frames
A single web browser window on your desktop may contain several tabs. Each tab is
an independent browsing context. Each has its own Window object, and each is isolated
from all the others. The scripts running in one tab usually have no way of even knowing
that the other tabs exist, much less of interacting with their Window objects or ma-
nipulating their document content. If you use a web browser that does not support
tabs, or if you have tabs turned off, you may have many web browser windows open
on your desktop at one time. As with tabs, each desktop window has its own Window
object, and each is usually independent of and isolated from all of the others.
But windows are not always isolated from one another. A script in one window or tab
can open new windows or tabs, and when a script does this, the windows can interact
with one another and with one another’s documents (subject to the constraints of the
same-origin policy of §13.6.2). §14.8.1 has more about opening and closing windows.
HTML documents may contain nested documents using an
creates a nested browsing context represented by a Window object of its own.
elements also create nested browsing contexts,
distinction between windows, tabs, iframes, and frames: they are all browsing contexts,
lated from one another the way independent tabs usually are. A script running in one
frame can always see its ancestor and descendant frames, though the same-origin policy
may prevent the script from inspecting the documents in those frames. Nested frames
are the topic of §14.8.2.
dow can, subject to same-origin constraints, use the objects, properties, and methods
defined in other windows. This is discussed in more detail in §14.8.3. When the same-
origin policy prevents the scripts in two distinct windows from interacting directly,
HTML5 provides an event-based message passing API for indirect communication. You
can read about it in §22.3.
14.8 Multiple Windows and Frames | 353
14.8.1 Opening and Closing Windows
You can open a new web browser window (or tab; this is usually a browser configura-
tion option) with the
method of the Window object.
specified URL into a new or existing window and returns the Window object that
represents that window. It takes four optional arguments:
The first argument to
is the URL of the document to display in the new window.
If this argument is omitted (or is the empty string), the special blank-page URL
The second argument to
is a string that specifies a window name. If a window
by that name already exists (and if the script is allowed to navigate that window), that
existing window is used. Otherwise a new window is created and is assigned the speci-
fied name. If this argument is omitted, the special name “_blank” is used: it opens a
new, unnamed window.
Note that scripts cannot simply guess window names and take over the windows in use
by other web applications: they can only name existing windows that they are “allowed
to navigate” (the term is from the HTML5 specification). Loosely, a script can specify
an existing window by name only if that window contains a document from the same
origin or if the script opened that window (or recursively opened a window that opened
that window). Also, if one window is a frame nested within the other, a script in either
one can navigate the other. In this case, the reserved names “_top” (the top-level an-
cestor window) and “_parent” (the immediate parent window) can be useful.
The name of a window is important because it allows the
method to refer to
existing windows, and also because it can be used as the value of the HTML
elements to indicate that the linked document (or the result
of submitting the form) should be displayed in the named window. The
on these elements can also be set to “_blank”, “_parent”, or “_top” to direct the linked
document into a new blank window, the parent window or frame, or the top-level
property of a Window object holds its name, if it has one. This property is
writable, and scripts can set it as desired. If a name (other than “_blank”) is passed to
, the window created by that call will have the specified name as the initial
value of its
property. If an
element has a
attribute, the Window
object that represents that frame will use that
attribute as the initial value of the
The third optional argument to
is a comma-separated list of size and features
attributes for the new window to be opened. If you omit this argument, the new window
is given a default size and has a full set of UI components: a menu bar, status line,
toolbar, and so on. In tabbed browsers, this usually results in the creation of a new tab.
354 | Chapter 14: The Window Object
On the other hand, if you specify this argument, you can explicitly specify the size of
the window and the set of features it includes. (Explicitly specifying a size is likely to
result in the creation of a new window rather than a tab.) For example, to open a small
but resizable browser window with a status bar but no menu bar, toolbar, or location
bar, you might write:
var w = window.open("smallwin.html", "smallwin",
This third argument is nonstandard and the HTML5 specification insists that browsers
be able to ignore it. See
in the reference section for more details on what
you can specify in this argument. Note that when you specify this third argument, any
features you do not explicitly specify are omitted. For various security reasons, browsers
include restrictions on the features you can specify. You are typically not allowed to
specify a window that is too small or is positioned offscreen, for example, and some
browsers will not allow you to create a window without a status line.
The fourth argument to
is useful only when the second argument names an
existing window. This fourth argument is a boolean value that indicates whether the
URL specified as the first argument should replace the current entry in the window’s
browsing history (
) or create a new entry in the window’s browsing history
). Omitting this argument is the same as passing
The return value of the
method is the Window object that represents the named
refer to the new window, just as you use the implicit Window object
to refer to
the window within which your code is running:
var w = window.open(); // Open a new, blank window.
w.alert("About to visit http://example.com"); // Call its alert() method
w.location = "http://example.com"; // Set its location property
In windows created with the
property refers back to
the Window object of the script that opened it. In other windows,
w.opener !== null; // True for any window w created by open()
w.open().opener === w; // True for any window w
is the method by which advertisements are made to “pop up” or “pop
under” while you browse the Web. Because of this flood of annoying pop ups, most
web browsers have now instituted some kind of pop up–blocking system. Typically,
calls to the
method are successful only if they occur in response to a user action
window when the browser first loads (or unloads) a page will usually fail. Testing the
may also fail for the same reason.
14.8 Multiple Windows and Frames | 355
188.8.131.52 Closing windows
Just as the
method opens a new window, the
method closes one. If you
create a Window object
, you can close it with:
Note the explicit use of the
identifier to distinguish the
method of the
Window object from the
method of the Document object—this is important
if you’re calling
from an event handler.
Most browsers allow you to automatically close only those windows that your own
either fails or the user is presented with a dialog box that asks him to allow (or cancel)
that request to close the window. The
method of a Window object that rep-
resents a frame rather than a top-level window or tab does nothing: it is not possible
to close a frame (instead you’d delete the
from its containing document).
A Window object continues to exist after the window it represents has been closed. A
window that has been closed will have a
null, and its methods will typically no longer work.
14.8.2 Relationships Between Frames
As we saw above, the
method of a Window object returns a new Window object
that has an
property that refers back to the original window. In this way, the
two windows can refer to each other, and each can read properties and invoke methods
of the other. A similar thing is possible with frames. Code running in a window or frame
can refer to the containing window or frame and to nested child frames using the prop-
erties described below.
Window object as
. A frame can refer to the Window object of the
window or frame that contains it using the
A Window object that represents a top-level window or tab has no container, and its
property simply refers to the window itself:
parent == self; // For any top-level window
If a frame is contained within another frame that is contained within a top-level win-
dow, that frame can refer to the top-level window as
is a general-case shortcut, however: no matter how deeply a frame is nested, its
property refers to the top-level containing window. If a Window object represents a
simply refers to that window itself. For frames that are direct
children of a top-level window, the
property is the same as the
356 | Chapter 14: The Window Object
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline. pdf link to attached file; add links to pdf
properties allow a script to refer to its frame’s ancestors. There is
more than one way to refer to the descendant frames of a window or frame. Frames are
elements. You can obtain an Element object that represents an
just as you would do for any other element. Suppose your document contains
. Then, the Element object that represents this iframe is:
var iframeElement = document.getElementById("f1");
elements have a
property that refers to the Window object of
the frame, so the Window object for this frame is:
var childFrame = document.getElementById("f1").contentWindow;
You can go in the reverse direction—from the Window that represents a frame to the
Element that contains the frame—with the
property of the
Window. Window objects that represent top-level windows rather than frames have a
var elt = document.getElementById("f1");
var win = elt.contentWindow;
win.frameElement === elt // Always true for frames
window.frameElement === null // For toplevel windows
It is not usually necessary to use the
method and the
property to obtain references to the child frames of a window, however. Every Window
object has a
property that refers to the child frames contained within the window
or frame. The
property refers to an array-like object that can be indexed nu-
merically or by frame name. To refer to the first child frame of a window, you can use
. To refer to the third child frame of the second child, you can use
. Code running in a frame might refer to a sibling frame as
. Note that the elements of the
array are Window objects,
If you specify the
attribute of an
element, that frame can be indexed
by name as well as by number. A frame named “f1” would be
, for example.
Recall from §14.7 that the names or IDs of
and other elements are automat-
ically used as properties of the Window object, and that
elements are treated
differently than other elements: for frames, the value of these automatically created
properties refer to a Window object rather than an Element object. What this means
is that we can refer to a frame named “f1” as
instead of as
. In fact, HTML5
specifies that the
property is a self-referential property, just like
, and that it is the Window object itself that acts like an array of frames. This means
that we can refer to the first child frame as
, and we can query the number of
. It is usually clearer, and still traditional, to
here, however. Note that current browsers do not all make
, but those that do not make them equal do allow child frames to be
indexed by number or by name through either object.
14.8 Multiple Windows and Frames | 357
VB.NET PDF: Basic SDK Concept of XDoc.PDF
XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline. add a link to a pdf in acrobat; add hyperlinks to pdf online
You can use the
attribute of an
element to give the frame a name
attribute, however, the name
you specify also becomes the value of the
property of the Window that represents
the frame. A name specified in this way can be used as the
attribute of a link,
and it can be used as the second argument to
global object. But if code in one window or frame can refer to another window or frame
(and if the same-origin policy does not prevent it), the scripts in one window or frame
can interact with the scripts in the other.
Imagine a web page with two
elements named “A” and “B”, and suppose that
those frames contain documents from the same server and that those documents con-
tain interacting scripts. The script in frame A might define a variable
var i = 3;
That variable is nothing more than a property of the global object—a property of the
Window object. Code in frame A can refer to the variable with the identifier
, or it can
explicitly reference it through the window object:
Since the script in frame B can refer to the Window object for frame A, it can also refer
to the properties of that window object:
parent.A.i = 4; // Change the value of a variable in frame A
Recall that the
keyword that defines functions creates a variable just like the
keyword does. If a script in frame B declares a (non-nested) function
, that function
is a global variable in frame B, and code in frame B can invoke
. Code in frame
A, however, must refer to
as a property of the Window object of frame B:
parent.B.f(); // Invoke a function defined in frame B
If the code in frame A needs to use this function frequently, it might assign the function
to a variable of frame A so that it can more conveniently refer to the function:
var f = parent.B.f;
Now code in frame A can invoke the function as
, just as code in frame B does.
When you share functions between frames or windows like this, it is important to keep
the rules of lexical scoping in mind. A function is executed in the scope in which it was
defined, not in the scope from which it is invoked. Thus, if the function
to global variables, these variables are looked up as properties of frame B, even when
the function is invoked from frame A.
Remember that constructors are also functions, so when you define a class (see Chap-
ter 9) with a constructor function and an associated prototype object, that class is
358 | Chapter 14: The Window Object
defined only within a single window. Suppose that the window that contains frames A
and B includes the Set class from Example 9-6.
Scripts within that top-level window can create new Set objects like this:
var s = new Set();
But scripts in either of the frames must explicitly refer to the
constructor as a
property of the parent window:
var s = new parent.Set();
Alternatively, code in either frame can define its own variable to refer more conveniently
to the constructor function:
var Set = top.Set();
var s = new Set();
Unlike user-defined classes, the built-in classes like String, Date, and RegExp are au-
tomatically predefined in all windows. This means, however, that each window has an
independent copy of the constructor and an independent copy of the prototype object.
For example, each window has its own copy of the
constructor and the
strings and then make it a method of the String class by assigning it to the
object in the current window, all strings created by code in that win-
dow can use the new method. However, the new method is not accessible to strings
created in other windows.
The fact that each Window has its own prototype objects means that the
operator does not work across windows.
will evaluate to
, for example,
when used to compare a string from frame B to the
constructor from frame
A. §7.10 describes the related difficulty of determining the type of arrays across
The WindowProxy Object
We’ve noted repeatedly that the Window object is the global object of client-side Java-
Script. Technically, however, this is not true. Each time a web browser loads new con-
including a newly created global object. But when multiple windows or frames are in
use, it is critical that the Window object that refers to a frame or window continue to
be a valid reference even if that frame or window loads a new document.
top of the scope chain and is where global variables and functions are defined. This
global object is, in fact, replaced whenever the window or frame loads new content.
The object we have been calling the Window object is not actually the global object,
but a proxy for it. Whenever you query or set a property of the Window object, that
object queries or sets the same property on the current global object of the window or
frame. The HTML5 specification calls this proxy object WindowProxy, but we will
continue to use the term Window object in this book.
14.8 Multiple Windows and Frames | 359
Because of its proxying behavior, the proxy object behaves just like the true global
object, except that it has a longer lifetime. If you could compare the two objects, it
would be difficult to distinguish them. In fact, however, there is no way to refer to
the true client-side global object. The global object is at the top of the scope chain, but
properties all return proxy objects. The
method returns a proxy object. Even the value of the
within a top-level function is a proxy object rather than the true global object.
1.This last point is a minor violation of the ES3 and ES5 specifications, but it is necessary to support
360 | Chapter 14: The Window Object
chapter—one of the most important in the book—explains how to do this.
Chapters 13 and 14 explained that every web browser window, tab, and frame is rep-
resented by a Window object. Every Window object has a
property that refers
to a Document object. The Document object represents the content of the window,
and it is the subject of this chapter. The Document object does not stand alone, how-
ever. It is the central object in a larger API, known as the Document Object Model, or
DOM, for representing and manipulating document content.
This chapter begins by explaining the basic architecture of the DOM. It then moves on
• How to query or select individual elements from a document.
• How to traverse a document as a tree of nodes, and how to find the ancestors,
siblings, and descendants of any document element.
• How to query and set the attributes of document elements.
• How to query, set, and modify the content of a document.
• How to modify the structure of a document by creating, inserting, and deleting
• How to work with HTML forms.
The final section of the chapter covers miscellaneous document features, including the
method, and techniques for querying the currently se-
lected document text.
15.1 Overview of the DOM
The Document Object Model, or DOM, is the fundamental API for representing and
manipulating the content of HTML and XML documents. The API is not particularly
complicated, but there are a number of architectural details you need to understand.
First, you should understand that the nested elements of an HTML or XML document
are represented in the DOM as a tree of objects. The tree representation of an HTML
document contains nodes representing HTML tags or elements, such as
, and nodes representing strings of text. An HTML document may also contain
nodes representing HTML comments. Consider the following simple HTML
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
The DOM representation of this document is the tree pictured in Figure 15-1.
Figure 15-1. The tree representation of an HTML document
If you are not already familiar with tree structures in computer programming, it is
helpful to know that they borrow terminology from family trees. The node directly
above a node is the parent of that node. The nodes one level directly below another
node are the children of that node. Nodes at the same level, and with the same parent,
are siblings. The set of nodes any number of levels below another node are the descend-
ants of that node. And the parent, grandparent, and all other nodes above a node are
the ancestors of that node.
Each box in Figure 15-1 is a node of the document and is represented by a Node object.
We’ll talk about the properties and methods of Node in some of the sections that follow,
362 | Chapter 15: Scripting Documents
Documents you may be interested
Documents you may be interested