Bookmarklet to submit page source to form

问题

I'm using a bookmarklet to send the current page source to a server function which then processes it (stores it, no information needs to be returned to the user).

Warning: ugly Javascript ahead, it's not a language I normally need to use.

Here's the bookmarklet, pretty-printed for ease of reading:

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

function c(a, b) {
    var c = document.createElement("textarea");
    c.name = a;
    c.value = b;
    d.appendChild(c)
}(document), d = document.createElement("form");
d.method = "POST";
d.action = "http://example.com/do.php";
d.enctype = "multipart/form-data";
d.target = "_blank";
c("h", h);
c("u", "1234");
document.body.appendChild(d);
d.submit();
})();

This basically works, "do.php" receives the head and body sections in form variable h.

However, it only seems to work once for each page. If the bookmarklet is pressed twice for the same page, nothing happens. When the page is reloaded, it works again. Is there something I should be resetting? (running once is enough of course, but it would be nice to give some feedback to the user the second time it is pressed).

Secondly, this pops up a new tab/window. I can work around this by having do.php return some javascript to close the window (note: this is just for testing purposes, not real code):

<?php
$page = $_REQUEST['h'];
file_put_contents('/tmp/work.txt', $page);
echo '<script type="text/javascript">window.close();</script>"';
?>

Ugly. Quick flash of the new tab, then it's gone. Is there a better approach? A "success" message would be nice, but I can't see how to incorporate that.

回答1:

First of all, you don't want to append the form to the document's body, because the form's HTML will then be included in subsequent POST requests, and you probably don't want that, so remove this line:

document.body.appendChild(d);

Secondly, it appears that multiple submissions to the same URL via bookmarklets are blocked by the browser (in Google Chrome's case anyway). The exact same code, run via an onclick handler on a button works every time. The solution is to add an additional, random parameter to each request, like this:

d.action = "http://example.com/do.php?nocache=" + Math.random();

I don't know if this a security or a caching issue, but this fix works.

Now, on to the new window. This is because you added the target = "_blank" attribute to the form. Of course, if you don't do that, the form submits in the current window / tab, and you probably don't want the user to leave the page. The first think to try would be using an iframe, appending the form to it, appending the iframe to the document, submitting the form, and then removing the iframe. Of course, you would need a mechanism to know when the form has finished submitting, which would probably land you in "cross-domain" restrictions land, but it's worth a try. You could also look into cross-domain AJAX requests, and JSONP.

Update

I think I've got it! I figured that you don't need the destination page to notify you when the submit is done, you can rely on the iframe's load event. I've tested this in Chrome and it works perfectly, please test other browsers too. See the code comments:

(function () {
    var html = document.documentElement.innerHTML;

    /** 
     * the iframe's onload event is triggered twice: once when appending it to the document, 
     * and once when the form finishes submitting and the new URL is loaded 
     */
    var loaded = 0;

    var iframe = document.createElement('iframe');

        // unique name, to make sure we don't create any conflicts with other elements on the page
        iframe.name = 'bookmarklet-' + Math.floor((Math.random() * 10000) + 1);
        iframe.style.display = 'none';

        iframe.onload = function () {
            // remove the iframe from the document on the second firing of the onload event
            if (++loaded == 1) {
                return;
            }

            // you can also alert('Done!') here :)
            document.body.removeChild(iframe);
        };

    var form = document.createElement('form');
        form.method = "POST";
        form.action = "http://requestb.in/sbnc0lsb?nocache=" + Math.random();
        form.target = iframe.name;

    var textarea = document.createElement('textarea');
        textarea.name = 'source';
        textarea.value = html;

    form.appendChild(textarea);
    iframe.appendChild(form);

    document.body.appendChild(iframe);

    form.submit();
})();

来源：https://stackoverflow.com/questions/13097416/bookmarklet-to-submit-page-source-to-form

标签

javascript

forms

bookmarklet