The form in the bottom frame of this page works much like the 'Find in page' dialog found on most browsers (look under 'Edit' on the menu bar). By entering some text and hitting the ENTER key or pressing 'Find' button it will search the page in this frame for that character string. When found, the matching text is highlighted and the window is scrolled, if necessary, to place it in view. Hitting it again will find the next occurence. When the search reaches the bottom of the page, it starts over at the beginning.

How it Works

Here's the function that does the search, as you can see, Netscape and IE require completely different code to achieve the same effect. It assumes that the global variables NS4 and IE4 are set to tell which browser is being used and the global win is a handle to the document to be searched. In this case, it is this one, in the top frame.

function findInPage(str) {



  var txt, i, found;



  if (str == "")

    return false;



  // Find next occurance of the given string on the page, wrap around to the

  // start of the page if necessary.



  if (NS4) {



    // Look for match starting at the current point. If not found, rewind

    // back to the first match.



    if (!win.find(str))

      while(win.find(str, false, true))

        n++;

    else

      n++;



    // If not found in either direction, give message.



    if (n == 0)

      alert("Not found.");

  }



  if (IE4) {

    txt = win.document.body.createTextRange();



    // Find the nth match from the top of the page.



    for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {

      txt.moveStart("character", 1);

      txt.moveEnd("textedit");

    }



    // If found, mark it and scroll it into view.



    if (found) {

      txt.moveStart("character", -1);

      txt.findText(str);

      txt.select();

      txt.scrollIntoView();

      n++;

    }



    // Otherwise, start over at the top of the page and find first match.



    else {

      if (n > 0) {

        n = 0;

        findInPage(str);

      }



      // Not found anywhere, give message.



      else

        alert("Not found.");

    }

  }



  return false;

}

The global variable n is used to keep track of how many times the given string has been found. Whenever the user changes the search string, it is reset to zero via the onchange event handler on the text box element.

Netscape Code

For Netscape, we use the built-in find() method on the top frame. The method does most of the work for us, scrolling the frame and highlighting the text automatically. It keeps track of it's current position so subsequent calls move to the next match.

You have no control over where find starts it's search but you can control the direction it moves in. If the find call doesn't return a match, it reverses the search direction to go backwards until it returns to the first match, in effect, rewinding the search to the top of the page. The value of n is bumped every time a match is found but it is used only to tell when the entire page has been searched and found no match has been found.

IE Code

IE requires a little more work. First you have to create a textRange object which holds all the text found in the page. It always start searching at the beginning of the text so to find multiple occurences the function must keep track of which instance it is on in a global counter. When n is zero, it takes first match and bumps n by one. The next time around, it finds the first match, moves the start of the text range to just past it and finds the next match after this position. For the third match, it finds the first two and returns the third, and so on. When it hits the end of the page, it resets n to zero to start all over.

In order to emulate the browser's find utility, when it reaches the desired match it moves the start of the text range back to the beginning of the match, redoes the find, marks the match as selected and scrolls the window to put it in view, using the methods shown in the code.

Source

• find.html - Creates frameset.
• find1.html - This page which is also the target of searches.
• find2.html - Search form and code.