window.location.href = url 什么时候执行？

Question

如下代码

window.location.href = url;
$(window.document.body).append(compiledTemplate);

我想要现有窗口中的$(window.document.body).append(compiledTemplate); to be appended on the new Page which will get opened, but it appends thecompiledTemplate` 然后加载指定的url

有没有办法做到这一点。 ?

注意：要传递的 url 已经定义了它的表单加载事件。我不想覆盖它。

Answer 1

window.location.href = url 什么时候执行？

非常接近立即。它告诉浏览器开始加载新页面的过程。当前页面及其上的代码将继续运行，直到新页面开始加载。更多内容如下。

我希望将$(window.document.body).append(compiledTemplate); 附加到将要打开的新页面上。

你不能。当前页面中的代码不能作用于下一页。要在下一页上采取行动，您必须在那个页面中有您的代码。

最好的办法是让当前页面以其他方式向新页面提供信息：

• 通过查询字符串参数
• 通过本地存储或会话存储
• 通过 cookie (blech)

...然后让 new 页面上的代码追加内容。

---

如果您这样做是为了响应用户生成的事件，您或许可以这样做：

var wnd = window.open(url);
$(wnd).load(function() {
    $(this).append(compiledTemplate);
});

...但它会在 new 页面（可能是新标签页）中打开 URL 并保持当前窗口打开，并且它仅适用于来自同一来源的页面。 p>

---

例如，如果您在页面上有这个：Live Example

<input type="button" id="the-button" value="Click">
<script>
  (function() {
    "use strict";

    $("#the-button").click(function() {
      var counter = 1;

      location.href = "http://stackoverflow.com";
      $("<p>Set, counter = " + counter + "</p>").appendTo(document.body);
      setInterval(function() {
        ++counter;
      $("<p>Counter = " + counter + "</p>").appendTo(document.body);
      }, 50);
    });
  })();
</script>

当您单击该按钮时，您会看到代码在行设置location.href 运行后显示“Set, counter = 1”，然后可能还有几行“counter = x” ，然后最终页面将被 Stack Overflow 替换。至此，旧页面的代码已经终止。它不能对新页面做任何事情。