Preload web content using link prefetch or javascript

2010-10-30 16:50

For the Bizou php gallery, I looked for different ways of preloading next image in “view” mode (example).

With Firefox it’s very simple. Just use the following element and the browser will preload your contents.
Contents are preloaded in background, once the whole current page is loaded.

 [html]
<link rel="prefetch" href="/images/nextimage.jpg" />

Problem: only Firefox supports this currently.
Note: a ticket is opened about this in the Chromium project.

For other browsers, use some Javascript triggered by the window.onload event:

 [javascript]
<script type="text/javascript">
window.onload = function() {
    // for images
    var im = new Image();
    im.src = '/images/nextimage.jpg';
    // and for other content
    var req = new XMLHttpRequest();
    req.open('GET', 'nextpage.php', false);
    req.send(null);
};
</script>

Beware of HTTP cache headers sent by the server to the browser.
To preload correctly PHP pages, make your script send an Expires header:

header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));

Then, for a simple browser detection from your PHP script:

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false) { ?>
<link rel="prefetch" href="nextpage.php" />

<?php } else { ?>
<script type="text/javascript">
window.onload = function() {
    var req = new XMLHttpRequest();
    req.open('GET', 'nextpage.php', false);
    req.send(null);
};
</script>
<?php } ?>

Links :

2010-10-30 16:50 · Tags: , , , , ,

Login form bookmarklet generator

2010-04-14 22:10

Bookmarklets are links containing Javascript code. They are useful when you save them in your bookmarks, in order to achieve some processing on the current page displayed in your browser.

It is possible to create bookmarklets authenticating you on a site with a login form. Note that it requires storing your login and passwordin the bookmarklet source code.

Login bookmarklet example

The bookmarklet code on several lines:

javascript:
document.body.appendChild(document.createElement('div')).innerHTML='
<form name="BletForm" method="POST action="http://www.woozweb.com/loginctrl">
<input type="hidden" name="login" value="MONLOGIN" />
<input type="hidden" name="pass" value="MONPASS" />
</form>';
document.forms['BletForm'].submit();

This code generates a POST HTTP request with two parameters, from your bookmarks. Writing this kind of code is easy for Web developpers, but hard for regular users.

So I wrote a bookmarklet that itself can generate login form bookmarklets, easily.

It’s very simple:

  1. Drag the generator bookmarklet in your bookmarks:
    generator
  2. Open a web page with a login form.
  3. Click on the generator in your bookmarks: a message appears next to the form.
  4. Fill in the login form.
  5. Click on the generation link: the bookmarklet appears.
  6. Drag the generated bookmarklet in your bookmarks.
  7. Finally, test your automatic login bookmarklet!

The generator bookmarklet even works with the login screen of my bank account. Obviously, your login information is stored directly in the bookmark, which is not very secure…

Notes:

  • Only tested with Firefox. Some work to make it compatible with Safari and IE.
  • Find a way to use Firefox password storage to retrieve the password.
  • If the bookmarklet doesn’t work for you, give me some feedback.

Links:

2010-04-14 22:10 · Tags: , ,