DWR/AJAX/JavaScript Hacks: The secrets of JavaScript in the adress bar

A couple of weeks ago a friend of mine send me a JavaScript code that I called “Balancez-Balancez” ;  it’s really fun to play with it . Just with your browser go to any website (e.g. www.baidu.com ), then  after the page is loaded copy the following code and paste it into the address bar of your browser :
javascript:R=0;x1=0.1;y1=0.05;x2=0.25;y2=0.24;x3=1.6;y3=0.24;x4=300;y4=200;x5=300;y5=200;DI=document.links;DIL=DI.length;A=function(){for(i=0;i-DIL;i++){DI[i].style.position='absolute';DI[i].style.left=Math.sin(R*x1+i*x2+x3)*x4+x5;DI[i].style.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++;};setInterval('A()',5);void(0);

What happens: all the links in the website become a beautiful CHINESE DRAGON DANCING !

The principle of this code is collecting some HTML elements(i.e. links) and animate them continuously (changing their style positions) along an elliptical line .

It was really pretty looking and it conducted me to dig deeply and find out how to go beyond  this practice of JavaScript in the address bar for just manipulating the HTML page : I thought about AJAX .

In fact if the page has an AJAX port, meaning the back end can handle some XMLHttpRequest, you can  build an out-of-page JavaScript code that runs into the address bar of the page and calls some functions in the back-end of your application .

Example: Use DWR

Consider you have exported a DWR function that gets the app logs from the server . You can just omit to put the JavaScript imports in your page header and load them dynamically with a JavaScript in the address bar ; you can also override the Ajax Callback function, you can override the callback handler and so on . Here is the example :


javascript:
script=document.createElement('script');
script.type='text/javascript';
script.src='/js/page.js';
document.getElementsByTagName('head')[0].appendChild(script);
css=document.createElement('link');css.type='text/css';
css.rel='stylesheet';
css.href='/css/page.css';
document.getElementsByTagName('head')[0].appendChild(css);
scriptA=document.createElement('script');
scriptA.type='text/javascript';
scriptA.src='/dwr/util.js';
document.getElementsByTagName('head')[0].appendChild(scriptA);
scriptB=document.createElement('script');
scriptB.type='text/javascript';
scriptB.src='/dwr/engine.js';
document.getElementsByTagName('head')[0].appendChild(scriptB);
dwr={};
dwr.engine={};
DWREngine=dwr.engine;
DWRLogsService={};
DWRLogsService._path='/dwr';
DWRLogsService.giveMeTheLogs=function(callback){
dwr.engine._execute(DWRLogsService._path,'DWRLogsService','giveMeTheLogs',callback);
};
if(DWRLogsService==null)alert('DWRLogsService=null');
void(0);
logsHandler=function(logsList){
newTable='<table cellpadding="4" cellspacing="0" width="100%" border="0">';
for(i=0;i<logsList.length;i++){
newTable+='<tr><td>'+logsList[i]+'</td></tr>';
}
newTable+='</table>';
document.getElementById('logsDiv').InnerHtml=newTable;
};
displayLogs=function(){
DWRLogsService.giveMeTheLogs(logsHandler);
};
setInterval('displayLogs();',1000);
void(0);

Since this technique is not very fair, there are three main points you have to consider when making building the Javascript code for the address bar:

1)Avoid new line (‘\n’ or ‘\r’) or space into your code : we are in the browser address bar !

2)Don’t use the name  ‘var’ for declaring your local or global variables ; this should cause a new space into your code.

4)Call void(0) at the end of your code .

I hope this can help anyone who want to try and please leave your feedback and lets share the experience .