こんにちは、フロントエンドエンジニアのはっちゃんです。
今回は短いですが、地味に知らなかったことを紹介しようと思います。
codepenで、アニメーションや、ちょっとしたゲームを作ったりしたとき……わざわざ ctrl + R を押さなくても、js上でリロードできる仕様にしたいと思ったことはありませんか?
これ、実はとっても簡単に実現できたんです。
目次 [閉じる]
以前作ったもので実装しているので紹介します
はい。これです。
先日の公開された私の記事内にあるものなのですが、地味に社内で気に入ってくれた方が多かったwebアプリ(?)です。
「phina.js」を使って毛を抜くアクションを作ってみよう【いろんな動きを作ってみようシリーズ】
この、毛を抜いた後に出てくる「もう一回抜く」のボタンで実装しています。
コード
それではコードの一部を抜粋して、紹介します。
// codepenをリセット
document.querySelector('#js-btn').addEventListener('click', () => {
history.go(0);
});
このhistory.go(0);がその部分です。
これはhistory APIの持つ「go」というメソッドで、引数に数字を渡すと、その数字分ブラウザの履歴を戻すメソッドです。
0を入れると、今見ているページに戻ることになるので、結果リセットされるというわけです。
1行で書けてとてもお手軽ですね!
AD
まとめ
いかがでしたか? codepenで書いているときに「これどう実装するんだ……?」と思ってググってみたら、いろいろと使えそうだったのでご紹介させていただきました! 何かの参考になれば幸いです。はっちゃんでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。