Title Cloaking

Skip to: Description, demonstration, technical documentation (php/query string, javascript), files (main page, control page, main javascript, controls javascript), license.

Description

m-bread Title Cloaking is a simple tool to change the title of any web page that you are viewing, so that its contents is not obvious when you minimise the window. Hide what you are doing from prying eyes. No download needed.

Title Cloaking loads up in your browser and lets you type in the web address you want to view and the title you want to be displayed in the title bar of your browser. Try the demonstration below to change the title of this page, or go to http://tc.m-bread.com/ to use Title Cloaking with any web site. For example, title cloak: BBC, Miniclip Games or YouTube.

Demonstration

To change the title of this page in your browser, edit the text in the following text box. The title will update as soon as you change the contents of the box.

Title:

The full tool at http://tc.m-bread.com also has a box to type in a web address to view using that title.

Technical documentation

Ticle Cloaking uses Javascript to change the title and web page being viewed. There is a php script on the server to take the web address to display from the query string.

You can host a version of Title Cloaking on your server by downloading the files below, or you can put a smaller version on a single page, just to change the title of that page.

Allow users to change the title of your web pages

To allow visitors to your web pages change the title of them, add this code to the page:

<p>Title: <input type="text" value="m-bread Title Cloaking" onkeyup="window.top.document.title=this.value" onclick="this.select();" /></p>

Query string parameters

index.php

site: The web address to load as the first page in the lower frame. For example: http://tc.m-bread.com/index.php?site=http://www.m-bread.com loads m-bread.com, instead of Google which is the default.

tc.php

site: The web address which should be in the address text box when the page loads. This should be the same as what is displayed in the lower frame.

Javascript functions

When the page is first loaded, the script in main.js adds the notifyExit function as a listener to the onbeforeunload event. This provides the 'Are you sure?' dialog box when the browser tries to navigate away from Title Cloaking.

innerFrame.js: changePage()

When a web address is typed in the textbox and either the 'Go' button is clicked or the 'Enter' key is typed then the changePage() method in innerFrame.js is called. This function takes the value of the text box, adds http:// to the beginning of it if necessary, and calls changePage() in the frameset document, which was loaded from main.js. This function also changes the href attribute of the 'Close Title Cloaking' link, so when it is clicked the user is sent to the page last typed in the address box.

main.js: changePage(page)

This function is called by changePage() in innerFrame.js with one parameter, which is the web address the user entered in the address text box. This address is loaded in the lower of the two frames on index.php.

Files

tc.zip

Download all the following files in one zip archive.

index.php

The main page which is loaded to use Title Cloaking. It contains two frames: one containing tc.php, and the other to contain any web page for the user to browse.

Note: This file is designed to be used where the 'short open tag' setting is turned on. If it is not, remove the <??> from line 8. This is put there to stop the php engine thinking that the xml line is a php instruction. Also, replace all instances of <?= ... ?> with <?php echo ... ?>.

<?php
if( array_key_exists( 'site', $_GET ) ){
  $siteURL = $_GET['site'];
}else{
  $siteURL = 'http://www.google.com/';
}
?>
<<??>?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2003/g/data-view http://dublincore.org/documents/dcq-html/">
	<link rel="transformation" href="http://www.w3.org/2003/12/rdf-in-xhtml-xslts/grokCC.xsl" />
	<link rel="transformation" href="http://www.w3.org/2000/06/dc-extract/dc-extract.xsl" />
	<!-- License -->
	<link rel="cc.license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/" title="Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License"></link>
	<link rel="DCTERMS.license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/" title="Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License"></link>
	<meta name="DC.type" scheme="DCTERMS.DCMIType" content="Software"></meta>
	<meta name="DC.title" content="m-bread Title Cloaking"></meta>
	<meta name="cc.attributionName" content="Martin Pain"></meta>
	<link rel="cc.attributionURL" href="http://m-bread.com/resources/tc"></link>
	
	<title>m-bread.com - Title Cloaking</title>
	<script type="text/javascript" src="main.js">
	</script>
</head>
<frameset rows="100,*" id="fs">
<frame src="tc?site=<?=$siteURL?>" name="tcbar" id="tcbar"></frame>
<frame src="<?=$siteURL?>" name="mainpage" id="mainpage"></frame>
</frameset>
</html>

tc.php

The page containing the controls for the Title Cloaking. tc.php is loaded in the top frame of index.php. It contains a text box for the title of the window, and a text box for to change the website being displayed.

Note: This file is designed to be used where the 'short open tag' setting is turned on. If it is not, remove the <??> from the first line. This is put there to stop the php engine thinking that the xml line is a php instruction. Also, replace all instances of <?= ... ?> with <?php echo ... ?>.

<<??>?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
if( array_key_exists( 'site', $_GET ) ){
  $siteURL = $_GET['site'];
}else{
  $siteURL = 'http://www.google.com/';
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2003/g/data-view http://dublincore.org/documents/dcq-html/">
	<link rel="transformation" href="http://www.w3.org/2003/12/rdf-in-xhtml-xslts/grokCC.xsl" />
	<link rel="transformation" href="http://www.w3.org/2000/06/dc-extract/dc-extract.xsl" />
	<!-- License -->
	<link rel="cc.license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/" title="Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License"></link>
	<link rel="DCTERMS.license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/" title="Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License"></link>
	<meta name="DC.type" scheme="DCTERMS.DCMIType" content="Software"></meta>
	<meta name="DC.title" content="m-bread Title Cloaking"></meta>
	<meta name="cc.attributionName" content="Martin Pain"></meta>
	<link rel="cc.attributionURL" href="http://m-bread.com/resources/tc"></link>
	
	<title>m-bread.com - Title Cloaking</title>
	<style type="text/css">
	body, td, input {font-family:verdana; font-size:8pt;}
	td {padding:0px; vertical-align: top;}
	</style>
	<script type="text/javascript" src="innerFrame.js">
	</script>
</head>
<body onload="changePage()"> 
<table border="0" style="width:100%;">
 <tr>
  <td colspan="2">
   <a href="http://m-bread.com">m-bread.com</a> Title Cloaking<br/> - version 
   <a href="#" onclick="alert('Version 2.4, updated 2007-02-09\n\nNew features for version 2.4:\n- <Enter> key can be used instead of pressing "Go" button\n- Ftp protocol is now supported\n- Better syntax checking on URLs\n- Less error-prone server code'); return false;">2.4</a>.
   © mBread 2003, 2005, 2007
  </td>
  <td>
   <a id="closeLink" target="_top" href="<?=$siteURL?>" onclick="parent.clos=true">Close Title Cloaking</a>     
  </td>
 </tr>
 <tr>
  <td style="width:25%;">
   Title:
  </td>
  <td colspan="2" style="width:25%;">
<a href="#" onclick="document.getElementById('addressBox').value='http://www.spreadfirefox.com/?q=affiliates&id=69640&t=85';newpge();" style="float:right;"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/firefox_80x15.png"/></a>
   Page:
  </td>
 </tr>
 <tr>
  <td>
   <input type="text" name="tle" value="m-bread.com - Title Cloaking" onkeyup="window.top.document.title=this.value" onclick="this.select();" style="width:100%;" />
  </td>
  <td colspan="2">
    <form action="#" method="get" style="display:inline;" onsubmit="changePage(); return false;">
      <input type="text" name="site" id="addressBox" value="<?=$siteURL?>" style="width:70%;" /><input type="submit" value="Go" onclick="changePage()" style="width:30%;"/>
    </form>
  </td>
 </tr>
</table>
</body> 
</html>

main.js

This is the script for index.php. See the Technical Documentation for an explaination of the functions.

/******************
 This file is part of m-bread Title Cloaking
 (http://m-bread.com/resources/tc) and is licensed under the Creative
 Commons Attribution-Share Alike 2.0 UK: England & Wales License
 (http://creativecommons.org/licenses/by-sa/2.0/uk/) by Martin Pain
 (http://m-bread.com/). This means you are free to use, distribute and
 modify the calendar, as long as you distribute any work you use it in
 under a similar licence.
******************/

//Flag to set if 'Close Title Cloaking' link is clicked. Surpresses 'are you sure' exit message.
clos = false;

//Function to change which page is displayed in the lower frame
function changePage(page){
  document.getElementById('mainpage').setAttribute('src', page);
};//EoFn changePage

//'Are you sure' message displayed if the page is navigated away from
//The browser adds its own message around this
var promptMSG = "If you did not try to close this window, or close Title Cloaking, then the website you are on has tried to override Title Cloaking.\nPress OK to close Title Cloaking, or Cancel to continue using it.";

// onbeforeunload function.
// Provides the 'Are you sure' message to the browser when called
function notifyExit(event_) {
	if (!event_ && window.event) {
          event_ = window.event;
        }
	event_.returnValue = promptMSG;
	return promptMSG;
}

//Calls the notifyExit function when the page is navigated away from,
//unless the 'Close Title Cloaking' link was used
window.onbeforeunload = function(event) {
  if(!clos) return notifyExit(event);
}

innerFrame.js

This file is the script for tc.php. See the Technical Documentation for an explaination of the functions.

/******************
 This file is part of m-bread Title Cloaking
 (http://m-bread.com/resources/tc) and is licensed under the Creative
 Commons Attribution-Share Alike 2.0 UK: England & Wales License
 (http://creativecommons.org/licenses/by-sa/2.0/uk/) by Martin Pain
 (http://m-bread.com/). This means you are free to use, distribute and
 modify the calendar, as long as you distribute any work you use it in
 under a similar licence.
******************/

function changePage(){
   var site = document.getElementById('addressBox');
   if(site.value.indexOf('http')!=0&&site.value.indexOf('file')!=0&&site.value.indexOf('ftp')!=0)
   {site.value = 'http://' + site.value;}//document.write(site.value);}
   parent.changePage(site.value);
   document.getElementById('closeLink').href=site.value;
}//EoFn changePage

License

m-bread Title Cloaking is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License by Martin Pain. This means you are free to use, distribute and modify the calendar, as long as you distribute any work you use it in under a similar licence. Click on the image or licence name for more information.

Take a look at my other projects & resources,
such as the flash calendar that you can put on your own web site.

Menu

Resources menu:

Title Cloaking

Description

Demonstration

Technical documentation

Allow users to change the title of your web pages

Query string parameters

index.php

tc.php

Javascript functions

innerFrame.js: changePage()

main.js: changePage(page)

Files

tc.zip

index.php

tc.php

main.js

innerFrame.js

License