Inner-browsing extending the browser navigation paradigm

Note

This article is the version from 2003 with slight modifications (no images and no links to samples). It's here for reference.   

Introduction

When you click a link on a web page, your web browser makes a request to a web server which usually results in a new web page as a response. That new page may have links that take you to other pages, which may in turn have more links, and so on. This model of web navigation is so common that most Internet users do little else. But as the Internet matures, this model has begun to show its age and its limitations. For web developers, for example, it provides less fine-grained control over the experience, and it can strain bandwidth and other resources. And for users it usually doesn't begin to approach the seamlessness and usability of good application user interfaces. Recently, however, modern browsers and enriched web standards have begun to make new navigational and presentational models possible. One such model is Inner-Browsing, which is our name for a model in which all navigation occurs within a single page, as in a typical application interface. The single-page context and abstraction of data from the presentation can give your web applications new continuity, precision and control. This model is also interesting because is optimized to access contextual data instead reloading full web pages.

This article discusses the concept of inner-browsing and possible approaches for its implementation. It also provides two implementation examples using the model. The first one looks like a traditional DHTML ticker application and uses hidden IFRAMES and JavaScript to provide updates inside the webpage's ticker headlines section. This sample was made using IFRAMEs to illustrate a possible implementation. An implementation can also use other transport technologies such as SOAP-based remote procedure calls, XMLHTTPRequest interfaces, or DOM 3 Load. The second example shows a tabbed menu that dynamically loads news headlines into the current web page. This implementation uses XMLHTTPRequest.

Extending Traditional Hypertext Navigation

The hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page. HTML and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting DHTML, powerful programming languages like JavaScript, and additional media through embeddable third-party resources like Flash, Java, VRML, etc. Additionally, server-side technologies have also evolved, supporting and connecting different resources to different browsers. Despite all the evolution, we still see the underpinnings of the original model in modern web sites. We still connect through a set of links that mostly drive us to a new page, and we still occasionally lose track of where we are. Also, on the server side, the server often has to rebuild all of the context of the user interface with each new request. Of course, this traditional approach is useful and easy to implement, which is why it is still so widely used. But the real showcase for new browser features and web standards like HTML 4.0 and DOM Level 2, and XML are models like inner-browsing, where these technologies can begin to be used in the way that they were envisioned. Many of the new web technologies in the HTML 4.0 specification, XML 1.0, DOM Level 3 were explicitly created with application-like behavior and more sophisticated navigational models in mind. In the next section we will introduce inner-browsing as an extension to the traditional model.

Let's start defining what we mean by inner-browsing. In this model, when a request goes to the web server, the current page is updated rather than replaced. Without leaving the page, the user browses new information and preserves the page's context. This new navigational method allows us to make HTML user interfaces behave similarly to non-web based applications such as contact management software. The basic implementation uses a resource such as the web page or the web application to control the navigation system. In other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device. What does this mean, practically speaking? What does it look like? Good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. See the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach.

Some examples:

Web page with Ticker

It is common to see web pages with a ticker element, often used to rotate news or stock quotes updates. A simple ticker element implemented in DHTML statically includes the data in the page. If the data changes, it will not update unless you reload the web page. This article includes a ticker example demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker.

Spell Check

Suppose you have a web publishing system for a portal, and a spell check application on your server. Today, this publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must click somewhere and wait for the response page. The inner-browsing model is able to provide users with automatic spell check without leaving the page being edited, a similar experience to a word processor application. The incorrect words are highlighted while the user is typing.

Forms with Nested Selects

In today's web pages it is common to see selects where content is dependent on the selection made on another select. For example, imagine a web form where users have to choose their city, by first selecting country then state. For example, imagine a web form where users have to choose their city, by first selecting country then state. Updating the selects without refreshing the page provides a better user experience and bandwidth savings.

Webmail Application

The flexibility to easily access and manage all message headers in mail applications (like Netscape Mail or Eudora) is probably one of the useful features when compared with web-based mail applications. In general, when a webmail account has more than a few messages, clicking 'Next Page' sends a request to the server. You receive a new page with the next block of message headers. On slow speed connections, this process can be slow and frustrating. With inner browsing, a simple request to retrieve the next set of message headers that replace the currently viewed message headers can dramatically improve user experience.

Implementing Inner-browsing on Top of HTML Pages

Modern browsers have good support for the W3C DOM and JavaScript allowing fine-grained control over page content. Instead of forcing the reader to follow links to new pages, the JavaScript code can act as the mediator for information access. If the user clicks on a link item, the script will be responsible to load the information from the data source and to apply that into the current document. There are basically two steps in this process:

Data Load: Acquisition of Information

Data acquisition can be implemented using JavaScript and remote procedure calls using SOAP-based RPC mechanism or using interfaces like XMLHTTPRequest (currently offered in Netscape 7 and Internet Explorer 6).

Data Bind: Mutation in the Current Document

This step takes care of applying the changes into the current document, based on the data loaded, and uses DOM interfaces. The mechanism can be as simple as copying new content to the current document, or as complex as performing dynamic transformations on the data source before applying the changes into the current document. For example, if a given web site's framework uses XSLT to format XML contents as HTML, would be appropriate to reuse XSLT to format new data that is about to be part of the current document.

The next section illustrates a case of implementation using JavaScript, IFRAMEs and DOM.

Inner-Browsing with IFRAMES and JavaScript

A very simple way to approach inner-browsing is to use HTML IFRAMES to retrieve data from a web server and update the main page. IFRAMES are already a very well established standard, and are implemented with the same functionalities in all modern browsers. A point worth recalling is that IFRAMES contain Documents, which can contain XML Documents. The XML document is an excellent structure for storing data. The following picture shows the model that is the essence of this technote. The idea is to use IFRAMES only for the communication channel and use the DOM and JavaScript to bind the content with the document in the main working page.

Data Request
   \________ dynamically create a hidden iframe
    \_________ content is loaded -> call data binder 
Data Binder 
           \_____ load XML||HTML data from iframe "container"
            \_____ send content to proper layout components 

The method presented here separates Data Request from Data Binding. This approach allows us to untie from the traditional navigation model. A request to a web server no longer requires a new page to be loaded, in order to update information in a page seamlessly.

As a general approach, the main steps to the IFRAME-based implementation can be represented as follows:

1. create a hidden IFRAME in the page;
2. when a new content is required, ask for the content to the iframe;
3. the iframe will load the content and callback a function in the main page;
4. update the main page.

Of course, specific implementations may have different requirements, like the use of multiple IFRAME elements to make multiple requests retrieving different contents at the same time.

Example Using IFRAMEs and JavaScript: Stock Ticker

This section describes a stock ticker application based on the inner-browsing model. The stock ticker is a web page with a stock ticker element that displays updated stock symbol information. The web page receives updates to its contents but only redraws the stock ticker element information. The code includes the DHTML element.

We've separated this sample in two main components following the model. The Data Loader module and the Data Binder module. The Data Loader module is responsible for the requests and retrieves the stock data information from the web. It also sends an event to the Data Binder module. The Data Binder module is responsible for the binding of the data with the HTML interface. In addition to these components, you will also find the piece of code that is responsible for the DHTML ticker. Note that the ticker is a completely separated component. The Data Binder will put the content in the proper place, so the existing DHTML ticker application is able to handle it.

Special Markup to support the model

It's important to add special markup that fulfills the requirements of the application. This example uses an IFRAME element as the mechanism to establish the communication with the server side application. So the following piece of HTML defines an IFRAME element which is not visible to the user:

<div style="visibility:hidden; position:absolute; top:-1000px; left:-1000px">
<iframe id="bridgeFrame" src=""></iframe>
</div>

The JavaScript code located in the Data Loader component will be interacting with this IFRAME element, requesting data from the server. Note that when the data is available (a web page is loaded into the IFRAME) this will not affect the web page context because the IFRAME is not visible.

Data Loader Component

This component is a simple JavaScript function that sets the src attribute of the hidden IFRAME, causing it to load an URL (i.e., by establishing a request on the server side):

/* Triggers the iframe to retrieve new data */
function retrieveData() { bridgeFrame.src = dataUrl; }

Once a web page is loaded into the IFRAME, the Data Binder will be able to get the data from the IFRAME's page and set the data into the main page's context.

Data Binder Component

The Data Binder is responsible for setting the data into the main page. However the Data Binder should know exactly when the data is available in the IFRAME. There are two basic approaches to do this. One is to keep checking the IFRAME until the document has completed loading. Another approach is to request an HTML page in the IFRAME and inside this page (requested data), set the onload event to callback a function notifying the parent document (originator). This sample is using the second approach.

To demonstrate how the callback mechanism is implemented, imagine the following HTML page loaded into the IFRAME as a result of a request (retrieveData method requested the HTML file in to be loaded in the IFRAME):

<body onload="top.iframeCallback(document);" > <mydata> This is the content that comes from the server </mydata> </body>

Note that when the page is loaded into the IFRAME, the onload event is fired and the parent.iframeCallBack function is called in the context of the parent document (the originator). Here, iframeCallback is considered the Data Binder, so it is responsible for getting the content from the IFRAME and putting it in the proper repository in the page's context. Note the following piece of code:

function iframeCallback(doc) {
    /* Copies the data in the iframe to the main page */
    myData = doc.getElementById("mydata");
    tickerDiv.innerHTML = myData.innerHTML;
}

The callback is called with the parameter doc, which is a reference to the IFRAME's document). The code locates element with ID mydata then copies the content of mydata (myData.innerHTML) into the tickerDiv element (DIV element that is the container of elements into the Ticker).

The above example is a simplified version of the inner-browsing model, but it gives you some idea of the possibilities. It uses simple JavaScript code to integrate the requested data into the main web page and updates HTML content in the ticker element. Note that the Ticker data in this example is static because the HTML data (tickerdata.html) never changes. In a real scenario the tickerdata.html should be dynamically generated by a server side application. Additionally, the JavaScript code could be modified to periodically reload the tickerdata.html. What is important is that new information can be dynamically loaded into the main web page's context. Though the inner-browsing model is mostly appropriate for web applications, it also can be used to improve accessibility to information in traditional web pages.

Example Using JavaScript's XMLHTTPRequest and DOM Interfaces: Tabbed menu for Headlines

This example demonstrates an implementation using XMLHTTPRequest interfaces. Both Netscape 7 and recent versions of Internet Explorer provide XMLHTTPRequest interfaces that allow JavaScript to dynamically load an XML document given a data source URL. In this case, the content that is updated on the page is a set of headlines for DevEdge articles. This example uses the actual XML datasources from DevEdge web site.

This example also follows the same model with a Data Loader and Data Binder component.

Data Loader Component

This component uses XMLHTTPRequest to load the XML data that represents the article headlines. XMLHTTPRequest interface returns the DOM for the document that was passed.

var x = new XMLRemoteRequest();
doc=x.getRemoteDocument(loaddata);

Note: the above code snippet shows an object being instanciated based on a class named XMLRemoteRequest. This class is just an abstraction layer that encapsulates the XMLHTTPRequest interface, and provides cross-browser support for recent IE versions and Gecko-based browsers. The following XML datasources are used in this sample:

http://web.archive.org/web/20090624020048/http://devedge-temp.mozilla.org/central/dom/catalog-new_en.xml

http://web.archive.org/web/20090218052509/http://devedge-temp.mozilla.org/central/xml/catalog-new_en.xml

http://web.archive.org/web/20100913225355/http://devedge-temp.mozilla.org/central/css/catalog-new_en.xml

http://web.archive.org/web/20090218052536/http://devedge-temp.mozilla.org/viewsource/catalog-new_en.xml

Data Binder Component

This procedure traverses the DOM that was returned via XMLHTTPRequest and generates markup based on the data provided in the DOM nodes. When the markup is ready, it copies the markup into the container element, which is a DIV element.

The following code snippet shows a simplified version of the logic that happens in the actual sample:

// doc is the DOM to the document returned
articles=doc.getElementsByTagName("article");
for(i=0;i<articles.length;i++) {  
  // acquiring the data from the DOM... 
  articleTitle=article.getElementsByTagName("article").item(0).firstChild.nodeValue;
  // inserting the content into the container.. 
  document.getElementById("container").innerHTML+=articleTitle+"<br />";
}

Source code for the sample

<html>
<head>
<title>Inner-browsing example, with XMLHTTPRequest and DOM</title>
<script type="text/javascript" language="javascript" src="xmlrequest.js"></script>
<script>
/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is Netscape code.
 *
 * The Initial Developer of the Original Code is
 * Netscape Corporation.
 * Portions created by the Initial Developer are Copyright (C) 2003
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s): Marcio Galli <mgalli@mgalli.com>
 *
 * ***** END LICENSE BLOCK ***** */ 
////
/// callDevEdge represents the Inner-Browsing function here
//
 function callDevEdge(loaddata,ele) {
	var x = new XMLRemoteRequest();
	doc=x.getRemoteDocument(loaddata);
	document.getElementById("container").innerHTML="";
	if(doc!=null) {
		tagname="article";
		// ie fix 
                if(document.all) tagname="nde:"+tagname;
		articles=doc.getElementsByTagName(tagname);
		for(i=0;i<articles.length;i++) { 
			article=articles.item(i);
			 tagname="title";      
             	 	  // ie fix       
                          if(document.all) tagname="nde:"+tagname;
			valuee=article.getElementsByTagName(tagname).item(0).firstChild.nodeValue;
              		 tagname="summary";  
                          // ie fix
                          if(document.all) tagname="nde:"+tagname;
			paraa=article.getElementsByTagName(tagname).item(0).firstChild.nodeValue;
			linkk=article.getAttribute("url");
			strvalue="<div class='nde-blurb'><h3><a href='"+linkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>";
			document.getElementById("container").innerHTML+=strvalue;
		}
	} 
 	if(previousEle) {
		previousEle.style.backgroundColor="white";
	}
	ele.style.backgroundColor="#ddeeff";
	previousEle=ele;
 }
var previousEle=null;
</script>
<style>
   .tab { position:relative;top:1px; border: 1px solid #dddddd; color:white; background-color:white; padding-left: 5px; border-bottom:white;padding-right: 5px;  padding-top:3px;
text-decoration:none;}
.tab:hover {
	background-color:#ddeeff;
}
</style>
</head>
<body >
<h2>Latest Headlines - Inner-Browsing Example </h2>
<p>Click the tabbed menu to dynamically load the headlines into this web page.</p>
<br />
<!-- 
***** This code dynamically creates the Tabbed Menu if the browser has support to XMLHTTPRequest, since the mechanism used here is XMLHTTPRequest ***** --> 
<script type="text/javascript" language="javascript">
   //// 
   /// Object detection 
   //
   var xComp=null;
   var testXMLHTTPRequest=false;
   try {
 	  xComp = new XMLHttpRequest();
	   if(xComp) testXMLHTTPRequest=true;
   } catch (e) { 
 	try { 
		 xComp = new ActiveXObject("Microsoft.XMLHTTP");
		if(xComp) testXMLHTTPRequest=true;
	} catch (e) {
	}
   } 
if(testXMLHTTPRequest&&document.getElementsByTagName) {
document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"callDevEdge('/viewsource/catalog-new_en.xml',this);return false;\">DevEdge News</a> <a href=\"javascript:\" class=\"tab\" onclick=\"callDevEdge('/central/css/catalog-new_en.xml',this);return false;\" title=\"CSS articles\">CSS</a> <a href=\"javascript:\" class=\"tab\" onclick=\"callDevEdge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"XML articles\">XML</a> <a href=\"javascript:\" class=\"tab\" onclick=\"callDevEdge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"DOM articles\">DOM</a></span>");
}
</script>
<!-- ***** This represents the container ***** --> 
<div style="margin-left:0px;border:1px solid #dddddd;" >
	<div style="padding:10px;" id="container">
	</div>
</div>
</body>
</html>