After taking a look at
multiple search-engines at once, a friend complained about all the
new windows that opened for each site. He wished he could get all the
results from multiple sites on a single page. We got thinking and I
implemented this solution using
The wonderful thing about
IFRAME is that its supported both by IE and
Netscape 6. It is good for developers that finally both IE and Netscape are
complying with W3C standards.
Although Netscape introduced several pioneering browser features, in recent
times, it has not been able to catch up with IE and it has long been
butt of jokes. Netscape 6, based on
Gecko, is a
major upgrade over version 4 and sports a
new look now.
Gecko is the rendering engine
of the Mozilla
open source project.
Gecko is embeddable, free,
and open source. Bugzilla
is the bug-tracking system used by the Mozilla project.
IFRAME element allows HTML content from one
document to be loaded within the body of another document.
The following are some of the properties common to Netscape 6 and
ID - Retrieves the string identifying the object.
FRAMEBORDER - Sets or retrieves whether to display a border for the frame.
Possible Values are 1/yes/0/no.
SCROLLING - Sets or retrieves whether the frame can be scrolled. Possible
Values are yes/no.
SRC - Sets or retrieves a URL to be loaded within the inline frame
WIDTH,HEIGHT - Sets or retrieves the width and height.
The LAYER tag is no longer supported in Netscape 6. More
exhaustive information about
IFRAME can be
For understandability and just in case you haven't taken a
peek at SearchLite,
let me just re-hash the way the script works. Information can be posted using a HTML Form through the
POST method. If a site uses the
GET method, the values that are submitted by the user
are visible in the URL.
Taking advantage of this particular
QueryString feature we
can dynamically build a URL based on the Site and the Keyword specified.
For instance by placing a keyword at the end of this URL
, I can search on Google without having to actually visit their
homepage. HTML cannot handle certain special characters and so care
must be taken to escape them so that the URL is a valid
one and the parameters are properly received.
escape() which does the job. The
escape function encodes special characters in
the specified string and returns the new string. It encodes spaces,
punctuation, and any other character that is not an ASCII alphanumeric character,
with the exception of these characters: * @ - _ + . /
By noticing the URL of other Search engines this script can be customized to handle
any other sites which use the GET method to accept search keywords. SearchLite v2 uses
IFRAMEs to show results
of multiple sites on a single page. Initially all the
elements are hidden using CSS (the good news is Netscape 6 fully supports the
CSS1 standard) in the
BODY onLoad event.
for (var icnt=1;icnt<13;icnt++)
document.getElementById("f"+icnt).style.visibility = 'hidden';
document.getElementById("t"+icnt).style.visibility = 'hidden';
Depending on how many checkboxes corresponding to the sites to be
searched are clicked, an equivalent number of
elements are made visible. Only as many
IFRAME elements as
needed are shown. The URL that is dynamically created based on the keyword
specified is set to the SRC property of
.The function below is activated on-clicking the FIND button
frmlen = document.myform.elements.length;
for (var icnt=0;icnt<frmlen;icnt++)
//loop thru all FORM elements and look for checkboxes
//which have been checked
if (document.myform.elements[icnt].type=="checkbox" &&
//make IFRAME visible
document.getElementById("f"+idiv).style.visibility = 'visible';
//make textbox that shows heading with
//name of site being searched, visible
document.getElementById("t"+idiv).style.visibility = 'visible';
//build the URL
strSite = document.myform.elements[icnt].value;
url = strSite + strSearch;
//set SRC property of IFRAME to dynamically built URL
document.getElementById("f"+idiv).src = url;
//show only the domain name part of the URL
To distinguish each result frame, the title is shown
inside a text box, camouflaged as a heading using CSS
HEIGHT: 22px; WIDTH: 599px;
<input type='text' id='t1' class='txt'>
After you unzip the source file, run it in IE or Netscape 6....and do let me
know what you felt about it.