【Javascript】history.pushStateは「file:///...」でHTMLを開いた場合は機能しないのでしょうか。
■解決したいこと
タイトルの通りなのですが、
Javascriptをローカルホスト等も利用せず、 HTMLファイルを直接ブラウザにドラックして開いた場合(リンク:file:///...)は、pushStateを利用しても機能しないのでしょうか。
メソッドを実行してもエラーが出てしまい、履歴が更新されません。
■実行ソースファイル
ブラウザ上にあるボタンをクリックしたら、カウント数が上がるものです。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="btn"value="カウントアップ">
<span id="result">-</span>回クリックされました。
<script src="main.js"></script>
</body>
</html>
Javascript
'use strict'
let count = 0;
let result = document.getElementById("result");
document.getElementById("btn").addEventListener("click",()=> {
result.textContent = ++count;
history.pushState(count, null, '/js/chap07/count/' + count);
});
window.addEventListener('popstate', function() {
count = e.state;
result.textContent = count;
})
■エラー内容追記
main.js:8 Uncaught DOMException:
Failed to execute 'pushState' on 'History':
A history state object with URL 'file:///js/chap07/count/1'
cannot be created in a document with origin 'null' and URL
'file:///Users/~/Desktop/~/index.html'.
at HTMLInputElement.<anonymous> (file:///Users/~/Desktop/~/main.js:8:13)