How to get javascript to load another html file?

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

Do an AJAX call directly in your bookmarklet, and then set the innerHTML of your div to the returned content. Not sure if there are security restrictions on this or not.

Edit: You don't want to use JQuery, as you can't easily load a javascript library from a bookmarklet. (Although maybe you could get it via AJAX and then eval it...)

You need to do a classic XMLHttpRequest.

Some more info here.

Answer 2

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.

Answer 3

With The Dojo Toolkit you can use dijit.layout.ContentPane or dojox.layout.ContentPane to do exactly what you want in one single div.
The difference between dijit.layout.ContentPane and dojox.layout.ContentPane is that you can run inline javascript inside the dojox.layout.ContentPane.

Answer 4

I got around the domain restriction by making a php function on my server that outputs a page on another domain. that way, javascript thinks it is in the same domain when I do an ajax.updater call.

$sSrcPage = $_REQUEST['SrcPage'];

echo file_get_contents($sSrcPage, 0);