与没有 window.location.href 属性的 window.open() 方法一起使用时，带有哈希值的 URL 的行为有所不同

Question

我不熟悉Javascript，如果您能就以下观察结果启发我，我将不胜感激。

我有这个 Javascript 函数，它应该导航到附加了参数字符串的页面。例如：

savebuttonClick() {

       window.open(encodeURI("/lightning/n/Test_Win_Open_Child#Id=123"),"_self");    
     

    }

但是，上面的脚本将导航到正确的 URL，但显示空白页面。

在使用 window.open() 方法导航之前，通过添加使用 window.location.href 属性构建 URL 来更改脚本可以解决该问题。页面将按预期显示，并且参数（Id）的值（123）将被传递到页面：

       window.location.href = encodeURIComponent("/lightning/n/Test_Win_Open_Child#Id=123");
       window.open(window.location.href,"_self");      

或者，将哈希值 (#) 替换为问号 (?) 也可以：

       window.open(encodeURI("/lightning/n/Test_Win_Open_Child?Id=123"),"_self");    

有人可以帮忙解释一下上述观察结果吗？

非常感谢！

Answer 1

您好，原始脚本的问题是

encodeURI()

函数仅对 URL 中的特殊字符进行编码，例如空格、问号和井号。但是，它不会对哈希符号 (#) 进行编码，该符号用于指定 URL 中片段标识符的位置。

当您使用

window.open()

导航到带有片段标识符的 URL 时，浏览器不会重新加载页面，而只是滚动到当前页面上的指定位置。这就是您看到显示空白页面的原因。

通过首先使用

window.location.href

构造 URL，然后将其传递给

window.open()

，您可以对井号 (#) 以及 URL 中的任何其他特殊字符进行编码。这确保浏览器将使用指定的片段标识符重新加载页面。

或者，您可以将 URL 中的井号 (#) 替换为问号 (?)。这将使浏览器将该参数视为查询参数而不是片段标识符，这将导致页面以指定的参数值重新加载。