Making a bookmarklet in javascript

Question

I am trying to make a bookmarklet for my website.

I have made a php page that when sent a GET for example www.website.com/index.html?a=banana it will return echo 'stand';

Now I am trying to make a bookmarklet that when I press it will: Do the GET to the php page, then display whatever the echo was back to the user in a small popup that disapears after 3 seconds.

How can I do this?

Instapaper bookmarklet does it...

javascript:
function%20iprl5(){
  var%20d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;
  try{
    if(!b)
      throw(0);
    d.title='(Saving...)%20'+d.title;
    z.setAttribute('src',l.protocol+'//www.instapaper.com/j/deyNbbpjuSei?u='+encodeURIComponent(l.href)+'&t='+(new%20Date().getTime()));
    b.appendChild(z);
  }
  catch(e){
    alert('Please%20wait%20until%20the%20page%20has%20loaded.');
  }
}
iprl5();
void(0)

mplungjan · Accepted Answer · 2011-06-19T12:52:31.407

A bookmarklet is a piece of javascript that runs in the scope of the page you are on.

It is not meant to just call arbitrary urls and cannot do so since that would be in violation of same origin practice. If your PHP can return JSONP, then you can write a bookmarklet that will insert a script on the page that envokes the script you return - that would be able to display a popup too

javascript:
function%20iprl5(){
  var%20d=document; // shorten document object
  var z=d.createElement('scr'+'ipt'); // create a script tag
  var b=d.body; // get document.body
  var l=d.location; // get document.location - I would get document.URL instead
  try{
    if(!b) throw(0); // if there is no body object available
    d.title='(Saving...)%20'+d.title; // set document.title
    z.setAttribute('src',l.protocol+'//www.yourserver.com/test.php?u='+encodeURIComponent(l.href)+'&time='+(new%20Date().getTime())); // create the script url
    b.appendChild(z); // append it to the body - I would append to head myself
  }
  catch(e){ // give an error
    alert('Please%20wait%20until%20the%20page%20has%20loaded.');
  }
}
iprl5(); // call it
void(0); // make sure it does not return a value to the window

paste this view-source:http://www.instapaper.com/j/deyNbbpjuSei?u=http://www.stackoverflow.com into the location bar to see the amount of stuff returned as part of the page you are on

If this is true, how come instapaper can do it? They give a bookmarklet that you click and it does exactly this... — David19801, Jun 19 '11 at 12:11
I am sure they do what I suggested. Post the bookmarklet and I can see. Fancy does the same — mplungjan, Jun 19 '11 at 12:20
@david19801 instapaper probably does it using JSONP as @mplungjan mentions. Read up on AJAX and JSONP! — BGerrissen, Jun 19 '11 at 12:21
Edit: removed comment. Included in mplungjan update of the post. — Amitay Dobo, Jun 19 '11 at 13:05

Making a bookmarklet in javascript

1 Answers1