Question

I am trying to create a bookmarklet, so that when you click on it, it will load example.com/yourdata.php in a div box.

How can I make it get the data from example.com?

IFRAME? or is there a better solution?

Answer 1

You may have issues with creating a bookmarklet within another page that grabs data from a different domain (to load into a <div /> using Ajax).

Your best option is probably to insert an IFrame with the content as the source of the page.

If you want to do this as a very basic lightbox, you could do something like this:

(function() {

    var iFrame = document.createElement('IFRAME');

    iFrame.src = 'http://google.com';
    iFrame.style.cssText = 'display: block; position:absolute; ' 
                         + 'top: 10%; left: 25%; width: 50%; height: 50%';

    document.body.insertBefore(iFrame, document.body.firstChild); 

})();

And here is the same code in bookmarklet format:

javascript: (function() { var iFrame = document.createElement('IFRAME'); iFrame.src = 'http://google.com'; iFrame.style.cssText = 'display: block; position:absolute; top: 10%; left: 25%; width: 50%; height: 50%'; document.body.insertBefore(iFrame, document.body.firstChild); })();

You could also style this a lot more if you wanted something pretty. This is just a basic example of what is possible. As another person said, it would be easiest to make it pretty by loading jQuery using an Ajax request, but that is a little more involved.