A quick look at the clock showed I'd missed lunch (again!) so here's the outcome of 20 mins of playtime scratching an itch I've had for a bit: how to test Javascript functions that pull content into your web page, like delicious bookmarks or flickr spellings (which will render words using letter photographs from flickr), without having to edit a test file.
What do I mean - well, if you look at the flickr spellings page, it will generate a snippet of HTML code that will pull a Javascript function into your page that will spell out a word using Flickr letter images.
If they had provided written instructions about how to embed the code in you page, they may have written something like:
"To include this spelling in your page insert the following piece of javascript where you want the image to appear:
<script type="text/javascript" src="http://metaatem.net/spell.php?picsize=t&string=OUseful"></script>
My itch was - if I see that sort of instruction, how could I quickly test the effect?
Well, here are a couple of attempts:
- a simple web page that lets you put in the URL of a Javascript include, like http://metaatem.net/spell.php?picsize=t&string=OUseful, for example, and it'll then load the script into the browser for you so you can try it out. It sort of works (but now how I wanted it to). Instead, I prefer:
- an insert this JS bookmarklet that will let you highlight a URL that is used within a Javascript include file, (like http://metaatem.net/spell.php?picsize=t&string=OUseful or http://del.icio.us/feeds/js/psychemedia/opml) and which will then load a test page that includes that file. (For some reason, this bookmarklet doesn't appear to work from inside the page (i.e. by clicking on the link in this page) - you need to actually use it as a bookmarklet from the browser toolbar for it to work.)
The bookmarklet makes a call to a script which in minimal from looks like this:
<html>
<head><title>Script test</title>
</head>
<body>
<?php
if (isset($_GET['js']) )
print '<script type="text/javascript" src="'.$_GET['js'].'" ></script>';
?>
</body>
</html>