H5のpushstateの使い方はどうですか？

2年 ago
桜, 春樹
1 minute

H5のpushStateメソッドは、ページをリロードせずにブラウザのURLを変更したり、履歴を追加したりするために使用できます。pushStateを使用する手順は以下の通りです：

  1. 現在のURLとタイトルを取得する方法は、window.location.hrefで現在のURLを取得し、document.titleで現在のタイトルを取得します。
  2. pushStateメソッドを呼び出す：window.history.pushState(state, title, url)メソッドを使用してURLを変更します。stateはオブジェクトであり、追加の状態情報を保存するために使用され、titleは新しいタイトルであり、urlは新しいURLです。
  3. ページの内容を変更する：必要に応じて、JavaScriptを使用してページの内容を変更することができます。
  4. document.titleプロパティを使用して、ブラウザのタイトルを変更するには、ブラウザのタイトルを更新してください。
  5. popstateイベントを監視する：ユーザーがブラウザの進む/戻るボタンをクリックすると、popstateイベントがトリガーされます。このイベントを監視して、ページコンテンツを再ロードするなどの処理を行うことができます。

以下是一个简单的示例代码，展示了如何使用pushState方法：

// 获取当前URL和标题
const currentURL = window.location.href;
const currentTitle = document.title;

// 新的URL和标题
const newURL = '/new-url';
const newTitle = 'New Page';

// 使用pushState方法修改URL
window.history.pushState(null, newTitle, newURL);

// 修改页面内容
document.getElementById('content').innerHTML = 'New content';

// 更新浏览器的标题
document.title = newTitle;

// 监听popstate事件
window.addEventListener('popstate', function(event) {
  // 根据需要处理popstate事件
  // 例如重新加载页面内容
});

pushStateメソッドを使用してURLを変更すると、ブラウザのアドレスバーに新しいURLが表示されますが、ページはリフレッシュされません。同時に、ブラウザの戻るボタンと進むボタンが有効になり、これらのボタンをクリックするとpopstateイベントが発生し、イベントハンドラーで適切な処理を行うことができます。

bannerAds