使用JavaScript检测URL哈希值的更改

我正在开发一个简单的应用程序，它基于单个页面（由于项目限制），并且具有动态内容。我理解动态内容，但我不理解的是如何设置一个脚本，当URL中的哈希值更改时，该脚本更改

div

的html

我需要一个JavaScript脚本来这样工作：

Url:

http://foo.com/foo.html

div目录：

Hello World

Url:

http://foo.com/foo.html#foo

div目录：

Foo

这是怎么回事

---

请帮忙！谢谢。

您可以收听

hashchange

事件：

$(window).on('hashchange',function(){ 
    $('h1').text(location.hash.slice(1));
});

就我个人而言，我会使用它为您提供了模板hashtag的灵活性（添加占位符并能够读回它们）。e、 g

$（函数（）{
//使用sammy检测哈希更改
$.sammy（函数（）{
//绑定到#：页面，其中：页面可以是某个值
//我们正在等待，可以使用此.params检索
this.get（'#：page'，function（）{
//使用ajax将一些页面加载到一个简单的容器中
$（'#container'）.load（'/partial/'+this.params['page']+'.html'）；
});
}).run（）；
});

---

这里可以找到一个例子：

假设我们有一个项目列表，每个项目都有一个散列标签作为#id

在controlRecipe函数中捕获id

const controlRecipe = async ()=>{
//jq
  const id =  $(window)..location.hash.replace('#','');
//js
  const id = window.location.hash.replace('#','');
  if(id){
    //console.log(id);
    state.recipe = new Recipe(id);
    try {
      await state.recipe.getRecipe();
      state.recipe.calcTime();
      state.recipe.calcServings();
      console.log(state.recipe);
    } catch (error) {
      alert(error);
    }
  }
}

---

看一看。@Bradchristie好的，我会看一看，但理想情况下我想避免使用插件太多。。。只使用jQuery是否可能？让我们现实地看一下。要么你花额外的时间写一些和图书馆一样的东西，要么你只是利用图书馆继续前进。您已经在使用jQuery（一个库），因为您可能想要灵活性，而不必自己编写。加上sammy可以让你插入占位符和模板传入的散列（非常灵活）@BradChristie，明白了，我只需要看一个例子。。。我有点搞砸了：（好吧，这似乎是一个愚蠢的问题，但这是在身体的末端还是在头脑中，因为我总是在这方面感到困惑？@RPM所以在头脑中？谢谢：）我相信这是假设HTML5的事件存在的。我不相信这不是jquery的本机事件，因此您正在考虑使用插件生成触发器，或者只接受支持触发器的事件。@BradChristie，您能给我举一个使用插件的例子吗，因为这对我不起作用：（我试过：

$（function（）{$.sammy（function（）{alert（“hello”）；}）；}）；

但是当我更改标签时，脚本不会发出任何警报…@fermionoid:它不是那样工作的。你需要用

this.get（…）绑定到更改

@fermionoid:请看我在更新的答案中包含的示例。当然，我会尝试一下。现在已经很晚了，所以我想我明天会告诉你进展情况：）谢谢你的帮助。（我对你的答案投了赞成票）

const markup = `
        <li>
            <a class="results__link" href="#${recipe.recipe_id}">
                <figure class="results__fig">
                    <img src="${recipe.image_url}" alt="${limitRecipeTitle(recipe.title)}">
                </figure>
                <div class="results__data">
                    <h4 class="results__name">${recipe.title}</h4>
                    <p class="results__author">${recipe.publisher}</p>
                </div>
            </a>
        </li>
    `;

//jquery: 
['hashchange', 'load'].forEach(event => $(window).on(event, controlRecipe));
//js:
['hashchange', 'load'].forEach(event => window.addEventListener(event, controlRecipe));

const controlRecipe = async ()=>{
//jq
  const id =  $(window)..location.hash.replace('#','');
//js
  const id = window.location.hash.replace('#','');
  if(id){
    //console.log(id);
    state.recipe = new Recipe(id);
    try {
      await state.recipe.getRecipe();
      state.recipe.calcTime();
      state.recipe.calcServings();
      console.log(state.recipe);
    } catch (error) {
      alert(error);
    }
  }
}