Bookmarklet post html contents (instead get/request)

Question

I'd like to create a bookmarklet to take the contents of a html page and send it to an external url for processing.

Usually it would be enough to just send document.title to the server and CURL it up serverside, but for various reasons this is not an option here. I tried:

javascript:
(
    function()
    {
        var htmlstuff=document.documentElement.innerHTML;

        window.open
        (
            'http://127.0.0.1/grabhtml.php?url='+escape(document.location)+'&title='+escape(document.title)+'&html='+escape(htmlstuff)+'&lm='+escape(document.lastModified)
            ,'InfoDialog','menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,dependent=no,width=400,height=480,left=50,top=50'
        );
    }
)
();

grabhtml.php is just <? file_put_contents('result.html',$_REQUEST['html']); ?>

As expected Apache doesn't like such long requests:

Request-URI Too Large
The requested URL's length exceeds the capacity limit for this server.

Therefore I thought about sending the document.documentElement.innerHTML via POST instead of GET.

Firefox-WebmasterTools has an option to show the "View Generated Source" rather than the normal "View Source".

I remember last year I've read an article about how an Instapaper-like-service did exactly the same.

I've searched for days for this article, or for bookmarklet examples which POST the "Generated Source" to my form.

My Javascript skills are very basic, but I'm a quick learner. A kick into the right direction would be greatly appreciated.

Answer 1

You can only use POST via AJAX, so it is necessary that your JS script is running on the same domain as grabhtml.php

If it is, you can simply use jQuery for this, and it will look like:

$.post('grabhtml.php', {
    url: document.location,
    title: document.title,
    html: htmlstuff
}, function(response) {
    alert('Successfully posted.');
});

If don't, you could try to embed your script into iframe (running at the same domain as php script), send title, body, etc. from the parent frame to this iframe (via window.postMessage) and issue POST request described above ommitting cross-domain restrictions.

You can read more about window.postMessage here: http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes

Note: I'm not sure about window.postMessage maximum message size