<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="/lib/xsl/devedge-1.00/article_en.xsl"?>
<nde:article 
  url="/toolbox/examples/2003/WDocumentLoader/" 
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:nde="http://devedge.netscape.com/2002/de" 
  xmlns:ent="http://devedge.netscape.com/2003/ent"
  xml:lang="en">

  <nde:header>

    <nde:title>
      A Window-based Document Loader
    </nde:title>

    <nde:category>
      Example
    </nde:category>

    <nde:pubdate year="2003" month="06" day="06"/>
    <nde:moddate year="2003" month="06" day="13"/>

    <nde:summary>
      Loading documents either as components of a web application or
      for use in pre-fetching requires reliable notification of when
      the documents are available. 
      WDocumentLoader provides an easy to use, cross-browser
      means of loading documents.
    </nde:summary>
    
    <nde:channels>
      <nde:channel id="dom"/>
      <nde:channel id="examples"/>
    </nde:channels>
    
    <nde:keywords>
      Netscape, Netscape 7, Mozilla, Gecko, Opera, Internet Explorer, Asynchronous, setTimeout, setInterval, JavaScript
    </nde:keywords>
    
    <nde:authlist>
      <nde:author>
        <nde:authname>Bob Clary</nde:authname>
        <nde:authtitle>Evangelist</nde:authtitle>
        <nde:authaffil>Netscape Communications</nde:authaffil>
      </nde:author>
    </nde:authlist>

  </nde:header>

  <nde:head>
  </nde:head>

  <nde:content>

    <h2>Introduction</h2>

    <p>
      Loading documents either as components of a web application or
      for use in <a href="/viewsource/2003/link-prefetching/">pre-fetching</a> requires reliable notification of when
      the documents are available. 
      <code>WDocumentLoader</code> provides an easy to use, cross-browser
      means of loading documents which
      works in Netscape 4.x, Netscape 6, Netscape 7, Mozilla, all Gecko-based browsers, Internet Explorer
      and Opera<ent:trade/>.
    </p>

    <p>
      <code><a href="WDocumentLoader.html">WDocumentLoader.html</a></code> 
      <em>extends</em> a normal <code>window</code> object 
      with several properties and functions 
      which can be used inside an IFRAME or customized to be 
      the main page of a web application.
    </p>

    <p>
      <code>WDocumentLoader.html</code> uses <a href="../CFormData/"><code>CFormData</code></a>
      to handle processing of the query strings used to specify
      the documents to be loaded.
    </p>


    <h2>Synopsis</h2>

    <dl>
      <dt>Properties</dt>
      <dd>
        <dl>
          <dt>document.location.search</dt>
          <dd>
            <p>
              <code>document.location.search</code> contains the query string used to 
              specify the files to be loaded. Each file is specified as the value of
              a file variable as in:
            </p>
            <pre>?file=URL1&amp;file=URL2&amp;...&amp;file=URLn</pre>
            <p>
              To load a set of documents using <code>WDocumentLoader</code>, simply
              load <code>WDocumentLoader.html?file=URL1&amp;file=URL2&amp;...&amp;file=URLn</code>
              in an external window, <code>FRAME</code> or <code>IFRAME</code>.
            </p>
            <p>
              Note that additional information can be passed via the query string.
            </p>

          </dd>
          <dt>Boolean gDataLoaded</dt>
          <dd>
            <p>
              <code>gDataLoaded</code> is set to <code>true</code>
              when the <code>onload</code> event handler is called
              for the <code>FRAMESET</code> containing 
              the documents to be loaded.
            </p>
          </dd>
          <dt>CFormData gFormData</dt>
          <dd>
            <p>
              <code>gFormData</code> is an instance of the 
              <a href="../CFormData/"><code>CFormData</code></a>
              JavaScript object which is used to process the query string
              specifying which documents are to be loaded.
            </p>
          </dd>
        </dl>
      </dd>
      <dt>Functions</dt>
      <dd>
        <dl>
          <dt>handleDataLoad</dt>
          <dd>
            <p>
              <code>handleDataLoad</code> is called by when the load
              event fires for the the <code>FRAMESET</code>s. It sets
              the global variable <code>gDataLoaded</code> to <code>true</code>,
              and calls the <code>WDocumentLoaderCallback</code> function defined
              in either the <code>parent</code> or <code>opener</code> window if
              it exists.
            </p>
            <p>
              <strong>June 13, 2003 update</strong> It is now possible to pass the
              name of the callback function to the <code>WDocumentLoader</code> in 
              the form:
            </p>
            <pre>?callbackfunction=functionName&amp;file=URL1&amp;file=URL2&amp;...&amp;file=URLn</pre>
          </dd>
          <dt>outputFrameset()</dt>
          <dd>
            <p>
              <code>outputFrameset()</code> uses <code>document.write</code>
              to output a <code>FRAMESET</code> containing a <code>FRAME</code>
              for each file specified in the query string used to load 
              <code>WDocumentLoader.html</code>.
            </p>
          </dd>
          <dt>getWindowByIndex(Number aIndex)</dt>
          <dd>
            <p>
              <code>getWindowByIndex()</code> returns a reference to the 
              <code>aIndex</code>th loaded window.
            </p>
          </dd>
          <dt>getWindowByFileName(String aFileName)</dt>
          <dd>
            <p>
              <code>getWindowByFileName()</code> returns a reference to the 
              loaded window containing file <code>aFileName</code>.
            </p>
          </dd>
        </dl>
      </dd>
    </dl>

    <h2>Example 1</h2>

    <p>
      Load a single file.
    </p>

    <pre><![CDATA[
var documentLoader;      

function WDocumentLoaderCallback()
{
  var message = 'Loaded: ';
  var files = documentLoader.gFormData.getValue('file');

  // if there is only one value, it is return as a simple
  // value. Since we are reusing this function to handle both
  // single values and multiple values, we convert a single value
  // back to an array for exposition purposes

  if (typeof(files) == 'string')
  {
    files = [ files ];
  }

  for (var i = 0; i < files.length; ++i)
  {
    if (i != 0)
    {
      message += ', ';
    }
    message += files[i];

    // compare returned window values
    if (documentLoader.getWindowByIndex(i) != documentLoader.getWindowByFileName(files[i]))
    {
      alert('there has been an error in getWindowByIndex/getWindowByFileName');
    }
  }
  alert(message);
  documentLoader.focus();
}

function doExample1()
{
  var querystring = 'WDocumentLoader.html?file=http://devedge.netscape.com/';
  documentLoader = window.open(querystring, 'example', 'height=500,width=500,status=1,resizable=1');
}]]></pre>

    <script type="text/javascript"><![CDATA[
var documentLoader;      

function WDocumentLoaderCallback(formData)
{
  var message = 'Loaded: ';
  var files = formData.getValue('file');

  // if there is only one value, it is return as a simple
  // value. Since we are reusing this function to handle both
  // single values and multiple values, we convert a single value
  // back to an array for exposition purposes

  if (typeof(files) == 'string')
  {
    files = [ files ];
  }

  for (var i = 0; i < files.length; ++i)
  {
    if (i != 0)
    {
      message += ', ';
    }
    message += files[i];

    // compare returned window values
    if (documentLoader.getWindowByIndex(i) != documentLoader.getWindowByFileName(files[i]))
    {
      alert('there has been an error in getWindowByIndex/getWindowByFileName');
    }
  }
  alert(message);
  documentLoader.focus();
}

function doExample1()
{
  var querystring = 'WDocumentLoader.html?file=http://devedge.netscape.com/';
  documentLoader = window.open(querystring, 'example', 'height=500,width=500,status=1,resizable=1');
}]]></script>

    <form method="get" action="">
      <input type="button" onclick="doExample1()" value="Run Example 1" />
    </form>

    <p>
      This example works in Netscape 6.x, Netscape 7.x,
      Mozilla, all Gecko-based browsers, Internet Explorer and 
      Opera 7.
      </p>

      <p>
        Note that Netscape Navigator 4.x does not load a single document however
        does load more than one reliably.
      </p>

    <h2>Example 2</h2>
    <p>
      Load two documents.
    </p>

    <pre><![CDATA[
function doExample2()
{
  var querystring = 'WDocumentLoader.html?file=http://www.netscape.com/&amp;file=http://www.cnn.com/';
  documentLoader = window.open(querystring, 'example', 'height=500,width=500,status=1,resizable=1');
}]]></pre>

    <script type="text/javascript"><![CDATA[
function doExample2()
{
  var querystring = 'WDocumentLoader.html?file=http://www.netscape.com/&amp;file=http://www.cnn.com/';
  documentLoader = window.open(querystring, 'example', 'height=500,width=500,status=1,resizable=1');
}]]></script>

    <form method="get" action="">
      <input type="button" onclick="doExample2()" value="Run Example 2" />
    </form>

    <p>
      This example works in Netscape 4.x, Netscape 6.x, Netscape 7.x,
      Mozilla, all Gecko-based browsers, Internet Explorer and 
      Opera 7.
      </p>

    <h2>Example 3</h2>
    <p>
      Load two documents.
    </p>

    <pre><![CDATA[
function myCallback(formData)
{
  alert('My Callback says ' + formData.getValue('file'));
}

function doExample3()
{
  var querystring = 'WDocumentLoader.html?callbackfunction=myCallback&amp;file=http://www.netscape.com/&amp;file=http://www.cnn.com/';
  documentLoader = window.open(querystring, 'example', 'height=500,width=500,status=1,resizable=1');
}]]></pre>

    <script type="text/javascript"><![CDATA[
function myCallback(formData)
{
  alert('My Callback says ' + formData.getValue('file'));
}

function doExample3()
{
  var querystring = 'WDocumentLoader.html?callbackfunction=myCallback&amp;file=http://www.netscape.com/&amp;file=http://www.cnn.com/';
  documentLoader = window.open(querystring, 'example', 'height=500,width=500,status=1,resizable=1');
}]]></script>

    <form method="get" action="">
      <input type="button" onclick="doExample3()" value="Run Example 3" />
    </form>

  </nde:content>

  <nde:related area="nde">
    <nde:item url="/toolbox/examples/2003/CFormData/">CFormData</nde:item>
    <nde:item url="/central/">DOM Central</nde:item>
    <nde:item url="/toolbox/examples/">Examples</nde:item>
  </nde:related>
  
</nde:article>
