Searchlite v2

'Anil' Radhakrishna

3.91/5 (6 votes)

May 18, 2002

3 min read

69510

737

Search multiple sites at once and view results on a single page

Download source files - 2 Kb

Introduction

After taking a look at SearchLite , the Javascript program I wrote to search 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 IFRAME .

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 the 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

The 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 IE -

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 found here

The Source

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 GET or 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 http://www.google.com/search?hl=en&btnG=Google+Search&q= , 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.

Javascript has a function called 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 IFRAME elements are hidden using CSS (the good news is Netscape 6 fully supports the CSS1 standard) in the BODY onLoad event.

function hide() 
{
    for (var icnt=1;icnt<13;icnt++)
    {
        document.getElementById("f"+icnt).style.visibility = 'hidden';
        document.getElementById("t"+icnt).style.visibility = 'hidden';
    }
}

<body onload="hide()">

Depending on how many checkboxes corresponding to the sites to be searched are clicked, an equivalent number of IFRAME 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 IFRAME.The function below is activated on-clicking the FIND button

function win()
{
frmlen = document.myform.elements.length;
idiv=1;
    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" && 
            document.myform.elements[icnt].checked)
        {
            //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;
            strSearch= escape(document.myform.mytext.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
            dmn=url.substring(7);

            document.getElementById("t"+idiv).value = 
                dmn.substring(0,dmn.indexOf("/"));

            idiv+=1;
        }
    }
}

To distinguish each result frame, the title is shown inside a text box, camouflaged as a heading using CSS

.txt
{
BACKGROUND-COLOR: lavender;
BORDER-BOTTOM-COLOR: lavender;
BORDER-BOTTOM-WIDTH: 0px; 
BORDER-LEFT-COLOR: lavender;
BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-COLOR: lavender;
BORDER-RIGHT-WIDTH: 0px;
BORDER-TOP-COLOR: lavender;
BORDER-TOP-WIDTH: 0px;
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.