Question

This is what I am trying to accomplish:

location.replace('http://localhost:8888/test/index.php?site=' + document.URL);

So I need the current URL to be send as a string of the site variable. Though the document.URL is not working, is there a way to get that working?

The idea is when I go to index.php the ‘site’ is inserted into a database. I would like the above link to work as a bookmarklet, (second part of the question) is there a way to execute that code but to still remain in the same page?

Basically if I am at google.com and click on the bookmarklet to execute the code above, Is there a way to remain at google.com but for the ..index.php to run in the background

At the moment I really need help with the first part of the question – but maybe you have any tips on how to achieve the second part?

Answer 1

• Use encodeURIComponent(location.href), instead of document.URL
  *
  1. You could create an IFRame, and set the src property of it.
  2. Another option is to execute a XMLHttpRequest ^[1]
  3. (new Image).src = url
  4. window.open(url) (may be blocked, hinders the user)
  5. Create a form, and submit it (using target=__, where __ can be _blank or a frame name.

^[1] This method does not work across different domains. See also: MDN: Using XMLHttpRequest.

Another method (allows passing feedback from the server, in the form of JavaScript code).

javascript:void(function(){
    var s = document.createElement("script");
    s.src = "http://localhost:8888/test/index.php?site="
              + encodeURIComponent(location.href);
    document.body.appendChild(s);
})();

Using Image:

javascript:void(function(){
    (new Image()).src = "http://localhost:8888/test/index.php?site=" +
         encodeURIComponent(location.href);
})();

EDIT alert + auto close

As requested in the comments, a pure JS alert which automatically closes after a certain time has elapsed. I’ve kept the function simple, for educative purposes. If you’re lazy, JQuery is also an option, although it’s overkill to include a whole framework for automatically hiding an “alert” box

/* @name        alertFade
   @description Shows a message, closing automatically after # milliseconds
   @param String message      Message to display
   @param number autoclose_ms Time in milliseconds till the message has to be closed
   @param number softFade_ms  Time in milliseconds for the fade animation*/
function alertFade(message, autoclose_ms, softFade_ms){
    if(typeof message == "undefined") message = "";
    if(isNaN(autoclose_ms)) autoclose_ms = 3000;
    if(isNaN(softFade_ms)) softFade_ms = 1000;
    var container = document.createElement("div"),
        alertBox = document.createElement("div"),
        alertContent = document.createElement("div"),
        dismiss = document.createElement("div");
    container.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;display:table;opacity:1;background:transparent;";
    alertBox.style.cssText = "display:table-cell;vertical-align:middle;text-align:center;";
    alertContent.style.cssText = "display:inline-block;white-space:pre-wrap;word-wrap:break-word;background:#DDF;font-size:normal;padding:5px";
    dismiss.style.cssText = "font-size:small;border-bottom:1px solid #CCC";

    dismiss.appendChild(document.createTextNode("(Click to dismiss)"));
    dismiss.onclick = fadeClose;
    alertContent.appendChild(dismiss);
    alertContent.appendChild(document.createTextNode(message));
    alertBox.appendChild(alertContent);
    container.appendChild(alertBox);
    document.body.appendChild(container);
    var alertAutoClose = window.setTimeout(fadeClose, autoclose_ms);
    var fadeTimer;

    function closeAlert(){
        window.clearTimeout(alertAutoClose);
        window.clearInterval(fadeTimer);
        if(container.parentNode) container.parentNode.removeChild(container);
    }
    function fadeClose(){
        if(!softFade_ms) return closeAlert(); //No fade = close immediately

        var opacity = 1;
        fadeTimer = window.setInterval(function(){
            opacity -= .1; //Reduce the opacity by 10% per interval
            if(opacity <= 0) return closeAlert();
            container.style.opacity = opacity;
        }, softFade_ms/10);
    }
}
//Example:
alertFade("Message!");