HTML 网站在 JavaScript 执行时崩溃

Question

每当我加载位于 here 的网站时，屏幕几乎完全变黑并崩溃。与此同时，链接的服务器页面也崩溃了。我能得到一些帮助来找出错误吗？我检查了多个验证站点，其中 none 个显示错误。

代码如下：

<html>
<head>
<style>
.titletext{
color:white;
display:block;
position:absolute;
font-size:50px;
width:1000px;
margin-left:150px;
margin-right:200px;
}
.nametext{
color:white;
display:block;
position:absolute;
font-size:30px;
width:600px;
margin-left:500px;
margin-right:200px;
margin-top:600px;
}
.earthphoto{
display:block;
position:absolute;
margin-left:400px;
margin-top:150px;
}
</style>
</head>
<body onload="update()">
<script type="text/javascript">
document.body.style.background="black";
var changescene=function(){
var allvariables=Object.keys( window );
if(page===1){
}
page++;
};
var page=1;
var x=0;
var update=function(){
if(page===1){
document.body.innerHTML="";
var text=document.createElement("p");
var textclass = document.createAttribute("class");
textclass.value="titletext";
text.setAttributeNode(textclass);
text.appendChild(document.createTextNode("Welcome to Mikey's Google Earth Presentation!"));
document.body.appendChild(text);
var text2=document.createElement("p");
text2class=document.createAttribute("class");
text2class.value="nametext";
text2.setAttributeNode(text2class);
text2.appendChild(document.createTextNode("By Mikey Richards"));
document.body.appendChild(text2);
googleearthimage=document.createElement("img");
googleearthimage.setAttribute("src","EARTH.png");
googleearthimage.setAttribute("class","earthphoto");
document.body.appendChild(googleearthimage);
var music=document.createElement("audio");
var musiclink=document.createElement("source");
musiclink.src="Test.mp3";
music.appendChild(musiclink);
var musicclass=document.createAttribute("id");
musicclass.value="sound1";
music.setAttributeNode(musicclass);
document.body.appendChild(music);
if(x===0){
document.getElementById("sound1").play();
x++;
}
if(document.getElementById("sound1").duration===document.getElementById("sound1").currentTime){
changescene();
}
}
else if(page===2){
document.body.innerHTML="";
}
update();
}
</script>
</body>
</html>

Answer 1

你有一个无穷无尽的递归。您无条件地从自身调用 update()。

var update=function(){
    if(page===1) {
    // your code 
    }
    else if(page===2){
        document.body.innerHTML="";
    }
    update();
}

Answer 2

首先，黑屏最有可能是由于脚本标记中的第一行：

document.body.style.background="black";

至于实际的页面崩溃，您的函数 "update" 无休止地调用自身，导致无限递归。

HTML 网站在 JavaScript 执行时崩溃

HTML website crashes on JavaScript execution

html

javascript

crash