One method of password protecting your webpages is to use a cookie, but cookies are unreliable. If you can't trust a cookie to store the information that the user is logged in, where can you store it? In this example I'll show you how to use frames for JavaScript password security.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

[About BTH]  [User Agreement]  [Privacy Policy]  [Site Map]  [Contact Form]  [Advertise on BTH]  [News Feed]

Google
Web
This Site

Password Protection Using the Frames Method

If you want to restrict access to your website to only members or subscribers, how can you implement password protection? If you own the server, or if your web host provider allows, you can use the servers built-in security features. If your Web host provider allows you to run custom scripts, you can use a php or asp script to implement password protection. But what if you're using a free host or a pay host that does not allow custom scripts?

One method of password protecting your webpages is to use a cookie, but cookies are unreliable. If you can't trust a cookie to store the information that the user is logged in, where can you store it? You can store it in a frame. In this example I'll show you how to use frames for JavaScript password security.

Using the frames method of JavaScript password protection, all of your webpages will be displayed in a frameset. The entire code for the frameset page is shown below.

<html>
<head>
</head>

<frameset rows="1,*">
<frame name="control" frameborder=0 framespacing=0
 src="control.htm" scrolling=no noresize>
<frame name="main" frameborder=0 framespacing=0
 src="home.htm">
</frameset>

</html>

This would be the code for your default webpage. The default webpage is the page that is displayed when a user enters your website's domain name, without a page name, in the address bar of their browser. On a Linux Web server, the default webpage is usually named index.html. On a Windows Web server, the default webpage is usually named default.htm or default.asp. For this example, I'm naming the default webpage index.htm. This means that to view the website you load index.htm (or click on index.htm on your computer).

Note that the frameset defines two frames. One frame is named main. This is the frame that all of your webpages would appear in, including your home page. For this example, I'm naming the home page home.htm. The other frame is named control. Only one webpage gets loaded into this frame. I'm naming that webpage control.htm because it, rather than a cookie, will be used to store our access variable. The entire code for control.htm is shown below.

<html>
<head>
<script language="JavaScript" src="control.js"></script>
</head>
<body>
</body>
</html>

Note that in the frameset, the control frame is only one pixel high and it can't be resized. In other words, the control frame is not visible to the user. The user sees only the webpage that is loaded into the main frame. Also note that the webpage that gets loaded into the control frame uses a JavaScript include statement that includes a file named control.js. The entire code for the file control.js is shown below.

var access = false;

All the include file control.js does is define a boolean variable to store whether the user has access or not. The variable is initialized to false so the user does not have access.

Web Design Sections

RSS Feed RSS Feed

Easy Java Script Code
Easy Slide Show Code
Easy Slide Show Code with Mouseover Pause
Easy Slide Show Code With Linked Slides
Slide Show with Different Size Images
Easy Java Script Timer Code
Easy Java Script Windows
Easy Rollovers
Easy Picture Transition Effects
Easy Moving Popup Code
Easy Picture Zoom Code
Easy Picture Panning Code
Easy Java Script Animation
Easy JavaScript Picture Selector Code
Easy Animated Banners with Java Script
Easy Java Script Form Validation
Easy Drag n Drop Code
Easy Graph Generating Code
Easy Code to Sort a Table by Column
Easy Expanding Menu Code
Web Designer's Reference
Object-Oriented JavaScript
Easy Fading Text Banner Code
Easy Expanding Banner Code
Calendars for Your Website
Date Picker For Your Web Site
Calculators For Your Web Site
Loan Payment Calculator
Length Units Converter
Body Mass Index
Fahrenheit to Celsius Converter
Decimal to Hexidecimal Converter
Easy Code for Screen Tape Adding Machine
Code for Java Script Circle⁄Sphere Calculator
Code for Java Script Cube⁄Box Volume Calculator
Round a Float to 4 Digits to the Right of the Decimal Point
Disable IE8 Accelerators on Your Website
Prevent Automated Form Submissions With Java Script
Make Your Own Graphical Digital Clock
Let Your Web site Visitors Set Font Size
How to Disable the Browser Back Button
Add More Bang to Your Content With Keyword Popup Menus
Put a Music Off Switch on Your Webpage
Java Script Random Password Generator
Password Protection Using the JavaScript Cookie Method
Password Protection Using the Frames Method
Replace Drop-down with Drag-and-drop
Submit Forms Without CGI
Code for a Less annoying Popup Window
Java Script Comparison Operators
Using the Java Script Array Object
Using the Java Script Date Object
Java Script Message Boxes
Java Script Trim Function
Convert Mixed Number to Decimal
How to Shuffle the Deck With Java Script
Web Site Menus : Which Section Am I In?
How Far Did the User Scroll?
Where Did the User Click?
Four Ways to Use Java Script Event Handlers
Create Your Own Database Using Only Notepad : CDV


[Site User Agreement]  [Advertise on This site]  [Search This Site]  [Contact Form]
Copyright©2001-2009 Bucaro TecHelp P.O.Box 18952 Fountain Hills, AZ 85269