Question

<!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

Answer 1

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

如果您想使用网络API查看代码的行为方式，那么您需要使用http(s)正确加载代码。这意味着使用一个简单的服务器（甚至不是一个完整的Apache等，只是一个单行的http服务器，如python -m SimpleHTTPServer，或php -S localhost:8000或node.js＆＃39; s http-server或live-server包裹等等）然后通过http://localhost:someport/yourfilename加载，其中＆＃34; someport＆＃34;是单线服务器所说的正在使用的端口号，＆＃34; yourfilename＆＃34;显然是你文件的名称。

history.pushState错误，我不知道为什么

1 个答案: