CodeLifter.com - Accent JavaScript Browser 1.0 Kit

JavaScript web-based browsers are an interesting idea, and they've been built by a number
of sites. However, do be aware that they have a number of shortcomings. For instance,
capturing pages that themselves contain frame-buster scripts (like our own -- see the
index) is not possible, and standard links that subsequently use target="_top" will
co-opt the frameset used in the javascript browser.

Nonetheless, this overall approach has a great deal to recommend it, and the scripts
we show here are excellent samples for studying techniques and solid springboards for
going further with your own ideas.

IMPORTANT

Remember that Alt-F4 will close any fullscreen window.
Sites that use frame-busters or _top link targets may become trapped
in the fullscreen window, and must be closed with Alt-F4.

PLEASE NOTE

Though this site and all of our other sites
[ www.CodeBrain.com www.CodeBelly.com www.BrainCode.com ]
do not use frame-buster scripts, most links on them do contain target="_top"
-- so these are not good choices for testing the demo.

Also, before you ask, as many will, it is not possible to launch a fullscreen window
like the JavaScript browser independently. It must be launched from an opener page.

There is also no way to eliminate or avoid the dialogue request in
Windows Internet Explorer if you attempt to self.close( ) the launching page after
starting the fullscreen popup that contains the JavaScript browser.

THE SCRIPTS

The Accent JavaScript Browser consists of five html pages, one css file,
and one background graphic image (shown at the bottom).
All should be placed together in the same directory.

Part One: The Frameset Page
This is the code that comprises the frameset that holds the browser navigation
frame page and the content frame page. Copy the code below exactly, and name
the file browser.html

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

Part Two: The Navigation Frame Page
This is the code that comprises the top navigation menu and controls.
Copy the code below exactly, and name the file navigation.html

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

<html>

<head>

var Now = document.location.search;
function doNow(){
if (Now != "") {
Now=Now.substring(1);
document.Address.Entry.value = Now;
}else{
document.Address.Entry.value = 'http://';
}
}

var whereTo;
var parsing;
function goThere(){
whereTo = '';
whereTo = document.Address.Entry.value;
parsing = whereTo.substring(0,7);
parsing = parsing.toLowerCase();
if (parsing != 'http://') whereTo="http://"+whereTo;
if (whereTo.length>12){
    parent.Content.location.href = whereTo;
    document.Address.Entry.value = whereTo;
    document.Address.action = 'navigation.html'+'?'+whereTo;    
}
}

function doClear(){
document.Address.Entry.value = "http://";
}

function doNada(){
parent.Content.focus();
}

</script>

</head>

<body background="bglines.gif">
<table border="0" cellpadding="0" cellspacing="5" width="100%">
  <tr>
    <form name="Address" method="post" onSubmit="javascript:return false">
     <td valign="middle" align="left" width="95%"> 
<input class="navButton" type="button" value="URL:" onClick="doNada()">     
<input class="navBox" type="text" name="Entry" size="40">
<input class="navButton" type="button" value="Go" name="goGet" onClick="javascript:goThere();doNada()">
<input class="navButton" type="button" value="Clear" name="reSet" onClick="javascript:doClear();doNada()">
    </td>
    <td valign="middle" align="right" width="1%"><input class="navButton" type="button" value="Home" name="Home" onClick="javascript:parent.Content.location='home.html';doNada()"></td>
    <td valign="middle" align="right" width="1%"><input class="navButton" type="button" value="Back" name="Back" onClick="javascript:history.go(-1);doNada()"></td>
    <td valign="middle" align="right" width="1%"><input class="navButton" type="button" value="Stop" name="Stop" onClick="javascript:parent.Content.location='halted.html';doNada()"></td>
    <td valign="middle" align="right" width="1%"><input class="navButton" type="button" value="Fwd" name="Fwd" onClick="javascript:history.go(1);doNada()"></td>
    <td valign="middle" align="right" width="1%"><input class="navButton" type="button" value="Close" name="Close" onClick="javascript:top.window.close();doNada();"></td>    
    </form>
    <script language="JavaScript">
    doNow();
    </script>
  </tr>
</table>
</body>

</html>

Part Three: The Content FramePage
This is the code that comprises the initial starting or 'home' page.
Copy the code below exactly, and name the file home.html

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

Part Four: The Halt Page
This is the code that comprises the page shown when the browser is halted.
Copy the code below exactly, and name the file halted.html

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

Part Five: The Launching Page
This is the code that comprises the launching page.
It will automatically launch the browser from an onload event in the body tag, or from a link.
Copy the code below exactly, and name the file index.html

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

<html>

</script>

<title>Accent Browser by CodeLifter.com</title>

</head>

<body bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#C0C0C0" onload="doPopUp()">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td width="100%" valign="middle" align="center" height="100%">
    <font color="#C0C0C0" size="3" face="Arial">
    Accent JavaScript Browser<br>
    </font>
    <font color="#C0C0C0" face="Arial" size="2">
    Version 1.0<br>
    by</font><br>
    <font face="Arial" size="2">
    <a href="http://www.codelifter.com" target="_blank">www.CodeLifter.com</a>
    </font>
    <font color="#C0C0C0" size="3" face="Arial">
    <br>
    <br>
    w e l c o m e
    </font>
    <br>
    <br>
    <font color="#777777" size="2" face="Arial">
    Requires Microsoft Internet Explorer
    <br>
    JavaScript Enabled
    </font>
    <br>
    <br>
    <font size="2" face="Arial">
    <a href="javascript:doRePopUp()">launch browser</a>
    </font>
    </td>
  </tr>
</table>
</center>
</body>

</html>

Part Six: The StyleSheet File
This is the code that comprises the styles used for the navigation.html and other pages.
Copy the code below exactly, and name the file style.css

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

Part Seven: The Background Image

Download the small lined image below by right-clicking and saving to your hard drive.
The image filename must be bglines.gif Save it in the same directory as the files above.

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MP3
Downloads

Contemporary classical music, completely free.