javascript 如何在 URL 参数中提交哈希键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6627648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I submit a hash key in an URL parameter?
提问by tvirtualw
I have a Spring-MVC application with Freemarker as the view component.
我有一个使用 Freemarker 作为视图组件的 Spring-MVC 应用程序。
In my templates, several links are generated which point back to my application and which include URL parameters containing a hash key (#).
在我的模板中，生成了几个指向我的应用程序的链接，其中包含包含散列键 ( #) 的URL 参数。
Example:
例子：
parameter: Q#106368 11
范围： Q#106368 11
URL generated by Freemarker with encoded param: testurl.html?key=Q%23106368%2011
由 Freemarker 生成的带有编码参数的 URL： testurl.html?key=Q%23106368%2011
I use JavaScript to redirect to this URL (reason: I use JS to manage loading of 2 frames at the same time).
我使用 JavaScript 重定向到此 URL（原因：我使用 JS 来管理同时加载 2 帧）。
The redirect method is simple:
重定向方法很简单：
function redir(url) {
window.location.href = url;
}
The JS call generated by Freemarker looks like
Freemarker 生成的 JS 调用看起来像
<a href="javascript:redir('http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011');">test</a>
My problem is that the browser / Javascript converts back the URL encoded parameter, thinks there is a #and cuts off there.
我的问题是浏览器/Javascript 将 URL 编码参数转换回，认为有一个#并在那里切断。
When I use window.location.href='http://...'directly it works. Only when using the method parameter it seems to be magically URL decoded and then the redirect fails because the URL gets cut off at the #.
当我window.location.href='http://...'直接使用它的工作。仅当使用方法参数时，它似乎被神奇地 URL 解码，然后重定向失败，因为 URL 在#.
Is there an easy way to transmit the parameter correctly?
有没有一种简单的方法可以正确传输参数？
I am aware that I could replace the #, e.g. with $$$hash$$$, in the template and do the replacement on the server side again. But there are so many places I would have to change...
我知道我可以替换模板中的#，例如$$$hash$$$，然后再次在服务器端进行替换。但是有很多地方我不得不改变......
回答by tvirtualw
As Marc B commented, it is necessary to URL encode again. The method would be encodeURI(). However, this method does not encode the #sign. For my specific use case, I have to replace the #sign with %23after the encoding.
正如 Marc B 评论的那样，有必要再次进行 URL 编码。方法是encodeURI()。但是，此方法不对#符号进行编码。对于我的特定用例，我必须在编码后替换#符号%23。
The redirect JS method finally looks like:
重定向 JS 方法最终看起来像：
function redir(url) {
url = encodeURI(url);
url = url.replace(/#/g, '%23');
window.location.href = url;
}
回答by laz
What browser are you using? I'm trying FireFox 5 and it doesn't convert %23back into #in my testing. When you mouse over the link or copy the link location, what does that have? Are you sure whatever is outputting the link isn't doing the conversion?
你使用的是什么浏览器？我正在尝试 FireFox 5，但在我的测试中它没有转换%23回#。当您将鼠标悬停在链接上或复制链接位置时，它有什么作用？您确定输出链接的内容没有进行转换吗？
Update
更新
This isn't ideal, but it seems like it solves the problem:
这并不理想，但似乎解决了问题：
<a onclick="url = 'http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011';" href="javascript:redir(url);">test</a>
It seems like the hrefattribute is decoded. When I mouse over it I seen the #instead of the %23.
似乎该href属性已被解码。当我将鼠标悬停在它上面时，我看到的是#而不是%23。
回答by Fire Crow
encodeURIComponent/decodeURIComponent is more thorough than just encodeURI, it will decode/encode '#' and event '/'
encodeURIComponent/decodeURIComponent 比 encodeURI 更彻底，它将解码/编码 '#' 和事件 '/'
