elements above has the same 
name
attribute (or if one element has a 
name
attribute, and
another element has an 
id
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 
<iframe>
elements with a 
name
or 
id
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 
<iframe>
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 
<iframe>
element. An
<iframe>
creates a nested browsing context represented by a Window object of its own.
The deprecated 
<frameset>
and 
<frame>
elements also create nested browsing contexts,
and each 
<frame>
is represented by a Window. Client-side JavaScript makes very little
distinction between windows, tabs, iframes, and frames: they are all browsing contexts,
and to JavaScript, they are all Window objects. Nested browsing contexts are not iso-
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.
Since the Window is the global object of client-side JavaScript, each window or frame
has a separate JavaScript execution context. Nevertheless, JavaScript code in one win-
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
Client-Side
JavaScript
Pdf links - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
pdf link to email; add links pdf document
Pdf links - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
clickable links in pdf from word; add hyperlink to pdf in preview
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 
open()
method of the Window object. 
Window.open()
loads a
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 
open()
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
about:blank
is used.
The second argument to 
open()
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.
Window Names
The name of a window is important because it allows the 
open()
method to refer to
existing windows, and also because it can be used as the value of the HTML 
target
attribute on 
<a>
and 
<form>
elements to indicate that the linked document (or the result
of submitting the form) should be displayed in the named window. The 
target
attribute
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
window.
The 
name
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
Window.open()
, the window created by that call will have the specified name as the initial
value of its 
name
property. If an 
<iframe>
element has a 
name
attribute, the Window
object that represents that frame will use that 
name
attribute as the initial value of the
name
property.
The third optional argument to 
open()
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
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
Embed zoom setting (fit page, fit width). Turn PDF form data to HTML form. Export PDF images to HTML images. Embed PDF hyperlinks to HTML links.
adding a link to a pdf; adding an email link to a pdf
C# Image: Tutorial for Document Management Using C#.NET Imaging
more detailed C# tutorials on each part by following the links respectively are dedicated to provide powerful & profession imaging controls, PDF document, image
add link to pdf file; add hyperlinks to pdf
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",
"width=400,height=350,status=yes,resizable=yes");
This third argument is nonstandard and the HTML5 specification insists that browsers
be able to ignore it. See 
Window.open()
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 
open()
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 (
true
) or create a new entry in the window’s browsing history
(
false
). Omitting this argument is the same as passing 
false
.
The return value of the 
open()
method is the Window object that represents the named
or newly created window. You can use this Window object in your JavaScript code to
refer to the new window, just as you use the implicit Window object 
window
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 
window.open()
method, the 
opener
property refers back to
the Window object of the script that opened it. In other windows, 
opener
is 
null
:
w.opener !== null;      // True for any window w created by open()
w.open().opener === w;  // True for any window w
Window.open()
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 
open()
method are successful only if they occur in response to a user action
such as clicking on a button or a link. JavaScript code that tries to open a pop-up
window when the browser first loads (or unloads) a page will usually fail. Testing the
lines of code shown above by pasting them into the JavaScript console of your browser
may also fail for the same reason.
14.8  Multiple Windows and Frames | 355
Client-Side
JavaScript
.NET PDF Document Viewing, Annotation, Conversion & Processing
PDF Write. Insert text, text box into PDF. Edit, delete text from PDF. Insert images into PDF. Edit, remove images from PDF. Add, edit, delete links. Form Process
add links to pdf in acrobat; pdf link
VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.
Turn PDF images to HTML images in VB.NET. Embed PDF hyperlinks to HTML links in VB.NET. Available zoom setting (fit page, fit width).
adding hyperlinks to a pdf; add hyperlink to pdf online
14.8.1.1  Closing windows
Just as the 
open()
method opens a new window, the 
close()
method closes one. If you
create a Window object 
w
, you can close it with:
w.close();
JavaScript code running within that window itself can close it with:
window.close();
Note the explicit use of the 
window
identifier to distinguish the 
close()
method of the
Window object from the 
close()
method of the Document object—this is important
if you’re calling 
close()
from an event handler.
Most browsers allow you to automatically close only those windows that your own
JavaScript code has created. If you attempt to close any other window, the request
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 
close()
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 
<iframe>
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 
closed
property of 
true
, its 
document
will be
null, and its methods will typically no longer work.
14.8.2  Relationships Between Frames
As we saw above, the 
open()
method of a Window object returns a new Window object
that has an 
opener
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.
You already know that the JavaScript code in any window or frame can refer to its own
Window object as 
window
or as 
self
. A frame can refer to the Window object of the
window or frame that contains it using the 
parent
property:
parent.history.back();
A Window object that represents a top-level window or tab has no container, and its
parent
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 
parent.parent
. The 
top
property
is a general-case shortcut, however: no matter how deeply a frame is nested, its 
top
property refers to the top-level containing window. If a Window object represents a
top-level window, 
top
simply refers to that window itself. For frames that are direct
children of a top-level window, the 
top
property is the same as the 
parent
property.
356 | Chapter 14: The Window Object
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
keeps the elements (like images, tables and chats) of original PDF file and maintains the original text style (including font, size, color, links and boldness
add links to pdf acrobat; add url link to pdf
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
The 
parent
and 
top
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
created with 
<iframe>
elements. You can obtain an Element object that represents an
<iframe>
just as you would do for any other element. Suppose your document contains
<iframe id="f1">
. Then, the Element object that represents this iframe is:
var iframeElement = document.getElementById("f1");
<iframe>
elements have a 
contentWindow
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
<iframe>
Element that contains the frame—with the 
frameElement
property of the
Window. Window objects that represent top-level windows rather than frames have a
null
frameElement
property:
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 
getElementById()
method and the 
contentWindow
property to obtain references to the child frames of a window, however. Every Window
object has a 
frames
property that refers to the child frames contained within the window
or frame. The 
frames
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
frames[0]
. To refer to the third child frame of the second child, you can use
frames[1].frames[2]
. Code running in a frame might refer to a sibling frame as
parent.frames[1]
. Note that the elements of the 
frames[]
array are Window objects,
not 
<iframe>
elements.
If you specify the 
name
or 
id
attribute of an 
<iframe>
element, that frame can be indexed
by name as well as by number. A frame named “f1” would be 
frames["f1"]
or
frames.f1
, for example.
Recall from §14.7 that the names or IDs of 
<iframe>
and other elements are automat-
ically used as properties of the Window object, and that 
<iframe>
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 
f1
instead of as 
frames.f1
. In fact, HTML5
specifies that the 
frames
property is a self-referential property, just like 
window
and
self
, 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 
window[0]
, and we can query the number of
frames with 
window.length
or just 
length
. It is usually clearer, and still traditional, to
use 
frames
instead of 
window
here, however. Note that current browsers do not all make
frame==window
, 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
Client-Side
JavaScript
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
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
convert excel to pdf with hyperlinks; pdf link open in new window
You can use the 
name
or 
id
attribute of an 
<iframe>
element to give the frame a name
that can be used in JavaScript code. If you use the 
name
attribute, however, the name
you specify also becomes the value of the 
name
property of the Window that represents
the frame. A name specified in this way can be used as the 
target
attribute of a link,
and it can be used as the second argument to 
window.open()
.
14.8.3  JavaScript in Interacting Windows
Each window or frame is its own JavaScript execution context with a Window as its
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 
<iframe>
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 
i
:
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 
i
, or it can
explicitly reference it through the window object:
window.i
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 
function
keyword that defines functions creates a variable just like the
var
keyword does. If a script in frame B declares a (non-nested) function 
f
, that function
is a global variable in frame B, and code in frame B can invoke 
f
as 
f()
. Code in frame
A, however, must refer to 
f
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 
f()
, 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 
f
above refers
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 
Set()
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 
String()
constructor and the
String.prototype
object. So if you write a new method for manipulating JavaScript
strings and then make it a method of the String class by assigning it to the
String.prototype
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 
instanceof
operator does not work across windows. 
instanceof
will evaluate to 
false
, for example,
when used to compare a string from frame B to the 
String()
constructor from frame
A. §7.10 describes the related difficulty of determining the type of arrays across
windows.
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-
tent into a window or a frame, it must start with a fresh JavaScript execution context,
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.
So client-side JavaScript has two important objects. The client-side global object is the
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
Client-Side
JavaScript
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
the 
window
self
top
parent
, and 
frames
properties all return proxy objects. The
window.open()
method returns a proxy object. Even the value of the 
this
keyword
within a top-level function is a proxy object rather than the true global object.
1
1.This last point is a minor violation of the ES3 and ES5 specifications, but it is necessary to support
the multiple execution contexts of client-side JavaScript.
360 | Chapter 14: The Window Object
CHAPTER 15
Scripting Documents
Client-side JavaScript exists to turn static HTML documents into interactive web ap-
plications. Scripting the content of web pages is the central purpose of JavaScript. This
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 
document
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
to explain:
• 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
nodes.
• How to work with HTML forms.
The final section of the chapter covers miscellaneous document features, including the
referrer
property, the 
write()
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
361
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 
<body>
and
<p>
, and nodes representing strings of text. An HTML document may also contain
nodes  representing HTML comments. Consider  the following  simple HTML
document:
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</html>
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