历史.推送状态错误，我不知道为什么

history.pushState error,i dont know why

本文关键字：我不知道 为什么 错误 状态 历史      更新时间：2023-09-26
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function(){
            var oInput = document.getElementById('input1');
            var oDiv = document.getElementById('div1');
            var iNow = 1;
            oInput.onclick = function(){
                var number = randomNum(35,7);
                oDiv.innerHTML = number;
                history.pushState(number,'');
            }
            window.onpopstate = function(event){
                var number = event.state || '';
                oDiv.innerHTML = number;
            }
            function randomNum(alls,now){
                var arr = [];
                var newArr = [];
                for(var i=1;i<=alls;i++){
                    arr.push(i);
                }
                for(var i=0;i<now;i++){
                    newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
                }
                return newArr;
            }
        }
    </script>
</head>
<body>
    <input type="button"  id="input1" value="35選7" />
    <div id="div1"></div>
</body>

我不知道为什么history.pushState不起作用，它会抛出错误：

history.html:14 Uncaught SecurityError: Failed to execute 'pushState' on   
'History': A history state object with URL  
'file:///C:/Users/TED/Documents/HBuilderProjects/javascript-%E7%9F%A5%E8%AD%98%E9%A1%9E/history.html' cannot be created in a document 
with origin 'null' and URL 
'file:///C:/Users/TED/Documents/HBuilderProjects/javascript-%E7%9F%A5%E8%AD%98%E9%A1%9E/history.html'.oInput.onclick @ history.html:14

不要假装file:///与"网页"相同：它们没有被浏览器使用与真实网页相同的机制加载，并且网页可以做的很多事情都不适用于"普通文件"。

如果您想使用 Web API 查看代码作为网页的行为方式，则需要使用 http(s) 正确加载它。这意味着使用一个简单的服务器（甚至不是完整的Apache之类的，只是一个单行http服务器，如python -m SimpleHTTPServer，或php -S localhost:8000或node.js的http-server或live-server包等），然后通过http：//localhost：someport/yourfilename加载它，其中"someport"是单行服务器所说的正在使用的任何端口号， 而"您的文件名"显然是您文件的名称。

相关文章：