在Polymer 1.1中使用window.location.href的正确方法

Correct way to use window.location.href in Polymer 1.1

本文关键字：href 方法 location window Polymer      更新时间：2023-09-26

在索引的头部，我有:

  // hashbang is set to true in routing.html
  <script type="text/javascript">
   if (window.location.href === "/users") {
    console.log('Hey you!');
   }
  </script>

我需要实现一些基于window.location的类绑定，但我正在测试以确保它在聚合物中起作用。不是吗?我不为我自己工作。当我转到localhost:3000/#!/users时，注意控制台

更新:

如果你使用的是带有Polymer starter kit的page.js，那么你的应用的所有页面都会在第一次加载时加载。

在这个入门工具包中，使用page .js更改路由将显示需要的页面，并添加display: none来隐藏其他页面。

例如，在您的app/index.html中，您应该有这样的内容:

<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
  <section data-route="home">
      ...
  </section>

  <section data-route="users">
    ...
  </section>
  <section data-route="user-info">
    ...
  </section>
...
</iron-pages>

iron-pages元素的route参数由Page.js在app/elements/routing.html:

中设置
page('/', function () {
  app.route = 'home';
});
page('/users', function () {
  app.route = 'users';
});
page('/users/:name', function (data) {
  app.route = 'user-info';
  app.params = data.params;
});
page('/contact', function () {
  app.route = 'contact';
});

因此，如果路由匹配/users，那么Page.js将设置app.route = 'users';，并且iron-pages Polymer元素将显示data-route="users"的部分并隐藏其他部分，而无需重新加载任何内容，因此无需重新加载脚本。

但实际上，因为你使用的是Page.js，它会更容易将你的代码集成到routing.html文件中，像这样:

page('/users', function () {
  app.route = 'users';
  console.log('Hey you!');
});
page('/users/:name', function (data) {
  app.route = 'user-info';
  app.params = data.params;
  console.log('Hey ' + data.params.name);
});
page('/contact', function () {
  app.route = 'contact';
  console.log('Contact page');
});

您可以从尝试调试开始，例如，尝试记录窗口href:

console.log(window.location.href);

应该返回:

http://localhost:3000/#!/users

然后你可以更深入地了解你的问题是什么!;)

事实上，window.location.href给了你完整的URL，它应该这样做(与聚合物或不)。

另一方面，window.location.hash返回从#字符开始的url中的所有内容，给您#!/users，因此您可以尝试:

<script type="text/javascript">
// Slice(2) to get rid of '#!'
if (window.location.hash.slice(2) === "/users") {
  console.log('Hey you!');
}
</script>

注:

如果在#之后有查询参数，如下所示:
localhost:3000/#!/users?number=42&name=value

window.location.href将变成#!/users?number=42&name=value

如果您还想在这种情况下摆脱查询参数?number=42&name=value，您可以这样写:

<script type="text/javascript">
   if (window.location.hash.slice(2).split("?")[0] === "/users") {
    console.log('Hey you!');
   }
</script>
相关文章：