javascript - 使用 jQuery 确定用户是否已将完整 URL 复制并粘贴到浏览器中？

Question

不确定这是否可行，无论是否有 jQuery。我有一个页面，有两个下拉菜单；一个显示今天的汽车销量，另一个显示昨天的汽车销量。今天的销售额始终在页面加载时呈现；当选中单选按钮时，将呈现“比较销售”，并将额外的路径添加到 URL 上。

我遇到的问题是，当向用户发送带有额外路径的网址时(即在发送链接之前已选择比较菜单)，“今日销售额”下拉列表的文本等在打开时不会填充链接。

例如:

没有比较的网址: http://www.example.com/today/sales

比较下拉菜单打开的网址: http://www.example.com/today/sales/compare/yesterday

我想创建一个 if 语句来表达类似的内容

if(link.pasted) {
 //do this
}

再次不确定这是否可能。

Answer 1

当用户做出选择时，您似乎已将整个页面重定向到不同的 URL，相反，您应该考虑在 URL 末尾使用哈希来指示已发生“比较”。

因此您最终会得到两个网址，这两个网址都都可以粘贴到浏览器中

http://www.example.com/today/sales
http://www.example.com/today/sales#compare-yesterday

将哈希应用到 JavaScript 操作的第一个 url 非常容易

$('input:radio.compareYesterday').click(function(){
    location.hash = "compare-yesterday";
});

您还可以观察哈希位置的变化，以便对 View 执行一些更新 - 我建议您将其包装在一个函数中，因为您也将在加载时执行此操作!

function updateUI(){
    if(location.hash == "#compare-yesterday"){
        // do whatever happens when comparison is active
    }
    else{
        // reset the UI to its default state
    }
}

$(function(){
    $(window).on('hashchange',updateUI);

    // other onload stuff

    updateUI();
});

This fiddle demonstrates 然而 jsfiddle 不允许我以传递散列的方式直接访问结果的 url - 所以虽然代码在那里，但我无法证明如果您直接访问 #compare-yesterday 它也可以工作 路线。

这是单页应用程序如何处理路由以及如何根据用户操作(或者实际上，如果他们跟随链接进入您的 SPA)调整 View 的基础。如果您有兴趣了解更多信息，您可能想看看 Angular 等框架。