javascript - 有没有办法在 location.replace 中添加 document.url

Question

这就是我想要实现的目标:

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

所以我需要将当前 URL 作为 site 变量的字符串发送。虽然 document.URL 不起作用，有没有办法让它起作用？

这个想法是当我转到index.php时，“站点”被插入到数据库中。我希望上面的链接作为书签使用，(问题的第二部分)有没有办法执行该代码但仍保留在同一页面中？

基本上，如果我在 google.com 并单击书签来执行上面的代码，有没有办法保留在 google.com 但让 ..index.php 在后台运行

目前我确实需要帮助解决问题的第一部分 - 但也许您对如何实现第二部分有任何提示？

Answer 1

• 使用encodeURIComponent(location.href)，而不是document.URL*
  1. 您可以创建一个 IFRame，并设置它的 src 属性。
  2. 另一个选项是执行 XMLHttpRequest ^[1]
  3. (新图像).src = url
  4. window.open(url)(可能被阻止，妨碍用户)
  5. 创建表单并提交(使用 target=__，其中 __ 可以是 _blank 或框架名称。

^[1] 此方法不适用于跨域。另请参阅:MDN: Using XMLHttpRequest .

另一种方法(允许以 JavaScript 代码的形式传递来自服务器的反馈)。

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

使用图像:

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

编辑警报+自动关闭

按照评论中的要求，一个纯JS警报，在一定时间过后自动关闭。出于教育目的，我使函数保持简单。如果您很懒，JQuery 也是一个选择，尽管包含一个自动隐藏“警报”框的整个框架有点过分了。

/* @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!");