jquery：更改 URL 地址而不重定向？

发布于 2024-11-17 12:38:02 字数 680 浏览 2 评论 0原文

可能的重复：
修改 AJAX 应用程序中的地址栏 URL 以匹配当前地址状态

如何在不重定向页面的情况下更改 URL 地址？

例如，当我点击下面的这个链接时：

<a href="http://mysite.com/projects/article-1" class="get-article">link</a>

我将从链接中获取 URL：

var path = object.attr('href');

如果我在下面执行此操作，页面将被重定向：

window.location = path;

我想做这样的事情pentagram.com/work/#/all/all/newest/" rel="noreferrer">site，当您单击图像时，ajax 调用将获取请求的页面，并且窗口上的 URL 地址将也被改变，这样它就有了一条路径你点击。

原文

Possible Duplicate:
Modify Address Bar URL in AJAX App to Match Current State

How can I change the URL address without redirecting the page?

For instance, when I click on this link below:

<a href="http://mysite.com/projects/article-1" class="get-article">link</a>

I will grab the URL from the link:

var path = object.attr('href');

If I do this below, the page will be redirected:

window.location = path;

I want to do something like this site, when you click on the image, the ajax call will fetch the requested page and the URL address on the window will be changed too, so that it has a path for what you click.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋意浓 2024-11-24 12:38:02

注意：现在支持 history.pushState() - 请参阅其他答案。

您无法在不重定向的情况下更改整个网址，您可以做的就是更改哈希。

哈希是 URL 中 # 符号后面的部分。最初的目的是引导您（本地）访问 HTML 文档的各个部分，但您可以通过 javascript 读取和修改它，以使用它有点像全局变量。

如果应用得好，该技术有两个用途：

浏览器历史记录将记住您执行的每个不同步骤（因为 url+hash 发生了更改），
您可以拥有一个不仅链接到特定 html 文档的地址，还提供您的 javascript关于该做什么的线索。这意味着您最终会指向网络应用程序内的一个状态。

要更改哈希值，您可以执行以下操作：

document.location.hash = "show_picture";

要观察哈希值更改，您必须执行以下操作：

window.onhashchange = function(){
    var what_to_do = document.location.hash;    
    if (what_to_do=="#show_picture")
        show_picture();
}

当然，哈希值只是一个字符串，因此您几乎可以执行以下操作你喜欢它。例如，如果您使用 JSON 对其进行字符串化，则可以将整个对象放在那里。

有非常好的 JQuery 库可以用它来做高级的事情。

NOTE: history.pushState() is now supported - see other answers.

You cannot change the whole url without redirecting, what you can do instead is change the hash.

The hash is the part of the url that goes after the # symbol. That was initially intended to direct you (locally) to sections of your HTML document, but you can read and modify it through javascript to use it somewhat like a global variable.

If applied well, this technique is useful in two ways:

the browser history will remember each different step you took (since the url+hash changed)
you can have an address which links not only to a particular html document, but also gives your javascript a clue about what to do. That means you end up pointing to a state inside your web app.

To change the hash you can do:

document.location.hash = "show_picture";

To watch for hash changes you have to do something like:

window.onhashchange = function(){
    var what_to_do = document.location.hash;    
    if (what_to_do=="#show_picture")
        show_picture();
}

Of course the hash is just a string, so you can do pretty much what you like with it. For example you can put a whole object there if you use JSON to stringify it.

There are very good JQuery libraries to do advanced things with that.

回复收藏 0 原文

薆情海 2024-11-24 12:38:02

请参阅此处 - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

本质上：

history.pushState('data', '', 'http://your-domain/path');

您可以操纵历史对象使这项工作发挥作用。

它仅适用于同一域，但由于您对使用哈希标签方法感到满意，所以这应该不重要。

显然需要进行跨浏览器测试，但既然它发布在 Opera 论坛上，我可以放心地假设它可以在 Opera 中工作，而且我刚刚在 Chrome 中测试了它，它工作得很好。

See here - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

Essentially:

history.pushState('data', '', 'http://your-domain/path');

You can manipulate the history object to make this work.

It only works on the same domain, but since you're satisfied with using the hash tag approach, that shouldn't matter.

Obviously would need to be cross-browser tested, but since that was posted on the Opera forum I'm safe to assume it would work in Opera, and I just tested it in Chrome and it worked fine.

回复收藏 0 原文

相守太难 2024-11-24 12:38:02

该网站使用了 url 的“片段”部分：“#”后面的内容。浏览器不会将其作为 GET 请求的一部分发送到服务器，但可用于存储页面状态。所以是的，您可以更改片段而不会导致页面刷新或重新加载。当页面加载时，您的 JavaScript 会读取此片段并相应地更新页面内容，根据需要通过 ajax 请求从服务器获取数据。读取js中的片段：

var fragment = location.hash;

但注意这个值会包含开头的“#”字符。设置片段：

location.hash = "your_state_data";

That site makes use of the "fragment" part of a url: the stuff after the "#". This is not sent to the server by the browser as part of the GET request, but can be used to store page state. So yes you can change the fragment without causing a page refresh or reload. When the page loads, your javascript reads this fragment and updates the page content appropriately, fetching data from the server via ajax requests as required. To read the fragment in js:

var fragment = location.hash;

but note that this value will include the "#" character at the beginning. To set the fragment:

location.hash = "your_state_data";

回复收藏 0 原文

方圜几里 2024-11-24 12:38:02

你不能按照你的要求去做（而且链接的网站也没有完全做到这一点）。

不过，您可以修改#符号后面的网址部分，这部分称为片段，如下所示：

window.location.hash = 'something';

片段可以 >不会发送到服务器（例如，Google 本身无法区分 http://www.google.com/ 和 http://www .google.com/#something），但它们可以通过 Javascript 读取在您的页面上。反过来，这个 Javascript 可以根据片段的值决定执行不同的 AJAX 请求，这就是您链接到的网站可能执行的操作方式。

You can't do what you ask (and the linked site does not do exactly that either).

You can, however, modify the part of the url after the # sign, which is called the fragment, like this:

window.location.hash = 'something';

Fragments do not get sent to the server (so, for example, Google itself cannot tell the difference between http://www.google.com/ and http://www.google.com/#something), but they can be read by Javascript on your page. In turn, this Javascript can decide to perform a different AJAX request based on the value of the fragment, which is how the site you linked to probably does it.

回复收藏 0 原文

萌无敌 2024-11-24 12:38:02

这是通过 URL 重写来实现的，而不是通过 URL 混淆来实现，后者是做不到的。

正如前面提到的，另一种方法是更改主题标签，

window.location.hash = "/2131/"

This is achieved through URL rewriting, not through URL obfuscating, which can't be done.

Another way to do this, as has been mentioned is by changing the hashtag, with

window.location.hash = "/2131/"

回复收藏 0 原文

旧时浪漫 2024-11-24 12:38:02

不，因为这会打开网络钓鱼的闸门。 URI 中唯一可以更改的部分是片段（# 后面的所有内容）。您可以通过设置window.location.hash来做到这一点。

回复收藏 0 原文

烟凡古楼 2024-11-24 12:38:02

如果不进行重定向，您就无法真正更改地址栏中的整个 URL（考虑安全问题！）。

但是，您可以更改 hash 部分（# 之后的内容）并读取：location.hash

ps.通过以下方式防止链接的默认 onclick 重定向：

$("#link").bind("click",function(e){
  doRedirectFunction();
  e.preventDefault();
})

You cannot really change the whole URL in the location bar without redirecting (think of the security issues!).

However you can change the hash part (whats after the #) and read that: location.hash

ps. prevent the default onclick redirect of a link by something like:

$("#link").bind("click",function(e){
  doRedirectFunction();
  e.preventDefault();
})

回复收藏 0 原文

~没有更多了~

关于作者

他不在意

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

jquery：更改 URL 地址而不重定向？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

苍风燃霜

我的黑色迷你裙

悸初

撧情箌佬

森罗

lyn1245

友情链接

jquery：更改 URL 地址而不重定向？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

苍风燃霜

我的黑色迷你裙

悸初

撧情箌佬

森罗

lyn1245

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。