Searching Body Text with textRange: Enter the Gecko - Create a master script file
(Page 4 of 4 )
The next logical thing to do is to create a master script file that contains both versions of each of the functions, and includes an additional function that directs the flow of the script towards whichever version of the functions will work on the browser that the visitor to the page is using. This way, separate versions of the script, tailored toward different browsers, do not need to exist for different pages of your site.
This can be done fairly easily with the addition of another function at the top of the page that is tied to the onload event, which as you know, is fired when the page has loaded. For the sake of simplicity, create a new js file now called behaviour(all).js and add all of the variables from both functions at the top, with a new variable called ieyes beneath them:
var searchWord
var range
var match
var button1clicked
var ieyes
The new variable also needs to be global because it will be accessed by both of the searching functions tied to the buttons. Now add a function directly below this called browserTest() and add the following code to it:
function browserTest() {
if (document.body.createTextRange() != 'undefined') {
ieyes = 1
}
}
All this does, is try to create a text range from the body text. If it can’t do this, the browser that is being used is not IE, because we know that IE does support this method, therefore ieyes is not set. If the browser does support it, the variable is set to 1 and this variable acts as a flag for use later on in the script. This function should be called, as stated above, by adding a function call to the body tags’ onload event.
Next, the textSearch() function should be added as follows:
function textSearch() {
button1clicked = 1
if (ieyes==1) {
//ie specific code here…
} else {
//Gecko specific code here…
}
}
Similarly, the searchNext() function is laid out thus:
function searchNext() {
if (ieyes==1) {
//ie specific code here…
} else {
//Gecko specific code here…
}
}
Now, each of the functions retain the same name and can therefore be called from the same buttons, whether those buttons are rendered in a Gecko or non-Gecko environment. Each section contains each of the browser specific sections of code that will work under whichever browser the user is viewing the page with. Testing the browser for the feature that you want to make use of in this way is better than using the useragent variable of the browser object, because it ensures that the feature that we want to use exists and doesn’t make assumptions about the features of a browser based on its often misleading useragent variable.
Once the above file is saved, remember to link it to the HTML page and then test it to your heart's content using Internet Explorer, Mozilla, Netscape or Firefox. You should find that this one script file works under all of these browsers and everything works in the desired way. There is still room for improvement. You may have noticed that, when searching for words that appear near the bottom of the page, the buttons move out of view when the word has been found. This may or may not affect the usability of the script, depending on how you implement the script and on which pages. One thing that you could do is place the buttons on a free-floating frame that moves down the page automatically as the page moves down.
Nevertheless, many pages, especially those with a lot of textual information on them, will benefit greatly from this in-page searching method that is a working remnant of the pre-DOM DHTML era.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 39 
