我在我正在构建的一个小页面上对 Chrome 和一个 Ajax 请求做了一个正确的噩梦。当谈到 Javascript/jQuery 时我很好，但这让我发疯。
基本上我有页面http://www.neuralnode.com/STARMAN/（警告，这似乎有时会使 Chrome 崩溃）并且它适用于大多数版本的 Firefox 和 IE 9+ 但每当我在 chrome 上尝试它时它不会完全可以工作，那么如果您将其放置太久，Chrome 就会崩溃。我不知道出了什么问题，我已经到处搜索了。让我解释一下代码：
我们有两个基本页面，index.php 和 viewer.php。index.php 使用多种方法加载 viewer.php，目前$.ajax我也尝试过。$.get.load()
为清楚起见，这是删除了所有其他 Javascript 功能的完整代码。在实时站点中，除了 ajax 加载之外的所有代码都被注释掉了。
索引.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StarViewer V1</title>
<style type="text/css">
<!--
html {
width:100%;
height:100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #666;
width:100%;
height:100%;
overflow:hidden;
}
#controls {
position: absolute;
left: 50%;
margin-left:-450px;
top: 0px;
background-color: #333;
width: 900px;
height: 100px;
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
font-size: 12px;
z-index: 999999;
opacity: 90%;
border: 2px solid;
border-radius: 5px;
-moz-border-radius: 5px; /* Old Firefox */
box-shadow: 3px 3px 3px #3E3E3E;
margin-top: 20px;
}
#container {
width: 100%;
height: 100%;
background-image: url(img/bkg_full.gif);
}
#bigcontainer {
height: 100%;
width: 100%;
overflow: scroll;
position: relative;
z-index: 1;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
}
-->
</style></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="application/javascript">
$(document).ready(function() {
function navigation(typ){
var Top = $('#bigcontainer').scrollTop();
var Left = $('#bigcontainer').scrollLeft();
var zoomspeed = $("#Speed").val();
var speed = parseFloat(zoomspeed);
if(typ == 'LEFT UP') {
NewLeft = Left - speed;
NewTop = Top - speed;
} else if (typ == 'UP') {
NewLeft = Left;
NewTop = Top - speed;
} else if (typ == 'RIGHT UP') {
NewLeft = Left + speed;
NewTop = Top - speed;
} else if (typ == 'RIGHT') {
NewLeft = Left + speed;
NewTop = Top;
} else if (typ == 'RIGHT DN') {
NewLeft = Left + speed;
NewTop = Top + speed;
} else if (typ == 'DN') {
NewLeft = Left;
NewTop = Top + speed;
} else if (typ == 'LEFT DN') {
NewLeft = Left - speed;
NewTop = Top + speed;
} else if (typ == 'LEFT') {
NewLeft = Left - speed;
NewTop = Top;
} else if (typ == '+') {
NewLeft = 12100;
NewTop = 4400;
}
$('#bigcontainer').animate({ scrollTop: NewTop, scrollLeft: NewLeft}, 300 );
//$('#bigcontainer').animate({ }, 500 );
return false;
};
var currlevel = $("#currzoom").attr("value");
function LoadDataIntoDiv(data) {
$('#bigcontainer').html(data);
navigation('+');
}
$.ajax({
url: "viewer.php",
data: {
zoom:'-250'
},
method: 'POST',
datatype: 'html',
async: true,
success: function(html) {
LoadDataIntoDiv(html)
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus+" - "+errorThrown);
}
});
/*$('#bigcontainer').load('', function() {
navigation('+');
});*/
});
//?
</script>
<body>
<div id="container">
<div id="controls">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="39%" align="center"><div id="zoommenu">Zoom [ <span class="item" title="-250">200%</span> | <span class="item" title="-110">150%</span> | <span class="item" title="-10">100%</span> | <span class="item" title="40">50%</span> | <span class="item" title="75">25%</span> | <span class="item" title="90">10%</span> ]</div></td>
<td width="15%" align="center">Selected Locations</td>
<td width="14%" align="right"><label>
<input type="button" name="lu" class="navigation" value="LEFT UP"/>
</label></td>
<td width="6%" align="center"><label>
<input type="button" name="up" class="navigation" value="UP"/>
</label></td>
<td width="9%" align="left"><label>
<input type="button" name="ru" class="navigation" value="RIGHT UP" />
</label></td>
<td width="17%">Curr H
<label>
<input name="CurrHPos" type="text" id="CurrHPos" size="7" />
</label></td>
</tr>
<tr>
<td align="right">From:
<input name="starsearch" type="text" id="starsearch" size="45" />
<input name="currzoom" type="hidden" id="currzoom" value="-250" /></td>
<td align="center"><div id="searchreturn"></div></td>
<td align="right"><label>
<input type="submit" name="LEFT" id="LEFT" class="navigation" value="LEFT" />
</label></td>
<td align="center"><label>
<input type="submit" name="CENTER" id="CENTER" class="navigation" value="+" />
</label></td>
<td align="left"><label>
<input type="submit" name="RIGHT" id="RIGHT" class="navigation" value="RIGHT" />
</label></td>
<td>Curr V
<label>
<input name="CurrVPos" type="text" id="CurrVPos" size="7" />
</label></td>
</tr>
<tr>
<td align="right">To:<input name="starsearch2" type="text" id="starsearch2" size="45" /></td>
<td align="center"><div id="searchreturn2"></div></td>
<td align="right"><label>
<input type="button" name="ld" class="navigation" value="LEFT DN" />
</label></td>
<td align="center"><label>
<input type="button" name="dn" class="navigation" value="DN" />
</label></td>
<td align="left"><label>
<input type="button" name="rd" class="navigation" value="RIGHT DN" />
</label></td>
<td>Scroll Speed:
<label>
<input name="Speed" type="text" id="Speed" value="300" size="7" />
</label></td>
</tr>
</table>
</div>
<div id="bigcontainer"></div>
</div>
</body>
</html>
和 viewer.php - 它是一个相当长的 foreach 循环，一般来说它的代码很混乱，但这不应该影响任何东西，因为它在其他两个主要浏览器中工作 - 我确实计划稍后整理它，只需要把这个想出来（解决;计算出;弄明白...
<?php
include 'database.class.php';
$database = new DatabaseConnector;
$Query = "SELECT * FROM startrekplanets";
$current = $database->ExecuteQuery($Query,"SELECT");
$zoomlevel=$_POST['zoom'];
?>
<style type="text/css">
<!--
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.roundedname {
}
.roundedname span {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
opacity:0.9; /* Transparent Background 50% */
display: inline-block;
width: 150px;
}
#planetinformation {
overflow: hidden;
position: absolute;
z-index: 888888888;
width: 185px;
background-color: #005BCC;
border: 2px solid;
border-radius: 5px;
-moz-border-radius: 5px; /* Old Firefox */
box-shadow: 3px 3px 3px #3E3E3E;
}
#planetinformation .ItemTitle{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #F60;
padding: 3px;
margin: 0px;
}
#planetinformation td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
padding: 0px;
}
-->
</style>
<script language="javascript" type="application/javascript">
$(document).ready(function() {
$("#planetinformation").hide();
$(".planetaryobject").click(function () {
var planid = $(this).attr("title");
$.ajax({
type: "POST",
url: "starquery.php",
data: "sstring="+planid+"&currzoom="+<?php echo $zoomlevel; ?>,
success: function(html) {
var SortedVars = new Object;
var SplitVars = html.split(',');
SortedVars = CollectVars(SplitVars);
$('#planetinformation').show('slow', function() {
$("#planetinformation").css("margin-top", SortedVars.V+40);
$("#planetinformation").css("margin-left", SortedVars.H+40);
$('#planetinformation').show('slow', function() {
$("#planetinformation .ItemTitle").html(SortedVars.Name);
$("#planetinformation .ItemQuadrant").html(SortedVars.Quadrant);
$("#planetinformation .ItemGrid").html(SortedVars.Grid);
$("#planetinformation .ItemCords").html(SortedVars.HCord+'/'+SortedVars.VCord);
$("#planetinformation .ItemStatus").html(SortedVars.Status);
$("#planetinformation .ItemOwnership").html(SortedVars.Zoned);
if (SortedVars.WikiLink) {
var formattedlink = '<a href="'+SortedVars.WikiLink+'">Link!</a>';
$("#planetinformation .ItemLink").html(formattedlink);
}else{
$("#planetinformation .ItemLink").html('');
}
});
});
},
complete: function (html) {
}
});
});
function CollectVars(varsin) {
var ReturnVars = new Object;
ReturnVars.H = parseFloat(varsin[0]);
ReturnVars.V = parseFloat(varsin[1]);
ReturnVars.IdName = varsin[2];
ReturnVars.Name = varsin[3];
ReturnVars.Special = varsin[4];
ReturnVars.NewW = parseFloat(varsin[5]);
ReturnVars.NewH = parseFloat(varsin[6]);
ReturnVars.Col = varsin[7];
ReturnVars.Done = varsin[8];
ReturnVars.Quadrant = varsin[9];
ReturnVars.Grid = varsin[10];
ReturnVars.HCord = parseFloat(varsin[11]);
ReturnVars.VCord = parseFloat(varsin[12]);
ReturnVars.Status = varsin[13];
ReturnVars.Zoned = varsin[14];
ReturnVars.WikiLink = varsin[15];
ReturnVars.ItemImage = varsin[16];
ReturnVars.ImageH = parseFloat(varsin[17]);
ReturnVars.ImageV = parseFloat(varsin[18]);
return ReturnVars;
}
});
</script>
<?php
$z=1;
foreach($current as $key=>&$val) {
if(empty($zoomlevel)) {
$zoomlevel = -250;
}
$minusH = ($val['Three'] / 100) * $zoomlevel;
$minusV = ($val['Four'] / 100) * $zoomlevel;
$H = $val['Three'] - $minusH;
$V = $val['Four'] - $minusV;
if(empty($val['Col'])) {
$colo = 'FFFFFF';
}else{
$colo = $val['Col'];
}
if($zoomlevel == '-250') {
$fold = 'zoom200/';
$Vsize = 47;
$HSize = 47;
$textsize = 14;
}elseif($zoomlevel == '-110') {
$fold = 'zoom150/';
$Vsize = 30;
$HSize = 30;
$textsize = 12;
}elseif($zoomlevel == '-10') {
$fold = 'zoom100/';
$Vsize = 22;
$HSize = 22;
$textsize = 10;
}elseif($zoomlevel == '40') {
$fold = 'zoom50/';
$Vsize = 15;
$HSize = 15;
$textsize = 8;
}elseif($zoomlevel == '75') {
$fold = 'zoom25/';
$Vsize = 8;
$HSize = 8;
$textsize = 7;
}elseif($zoomlevel == '90') {
$fold = 'zoom10/';
$Vsize = 4;
$HSize = 4;
$textsize = 5;
}
$z++;
if($val['Special'] == 1) {
$HSize = $val['NewH'];
$Vsize = $val['NewW'];
$H = $H - ($val['NewW'] / 1.5);
$V = $V - ($val['NewH'] / 1.5);
$op = 'opacity:0.4; filter:alpha(opacity=40);';
}else{
$op = '';
}
$CurrName = str_replace(' ','',str_replace('(','',str_replace(')','',$val['Name'])));
?>
<div class="planetaryobject" title="<?php echo $val['Id']; ?>" style="margin-left:<?php echo $H; ?>px; margin-top:<?php echo $V; ?>px; width:<?php echo $Vsize; ?>px; height:<?php echo $HSize; ?>px; position: absolute; z-index: <?php echo $z; $z++; ?>; <?php echo $op; ?> background-image: url(img/<?php echo $fold.$colo; ?>);" id="<?php echo $CurrName; ?>"></div>
<?php
if($val['Special'] == 1) {
$H = $H+($HSize/2);
$V = $V + 50;
}else{
$H = $H+10;
$V = $V-15;
}
?>
<div style="margin-left:<?php echo $H; ?>px; margin-top:<?php echo $V; ?>px; position: absolute; z-index: <?php echo $z; ?>; font-size: <?php echo $textsize; ?>px; font-family: Arial, Helvetica, sans-serif;"><div class="roundedname"><span><?php echo $val['Name']; ?></span></div></div>
<?php } ?>
<div id="planetinformation">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="2"><h1 class="ItemTitle">Title</h1></td>
</tr>
<tr>
<td width="48%">Quadrant:</td>
<td width="52%" class="ItemQuadrant"> </td>
</tr>
<tr>
<td>Grid:</td>
<td class="ItemGrid"> </td>
</tr>
<tr>
<td>Cordinates:</td>
<td class="ItemCords"> </td>
</tr>
<tr>
<td>Status:</td>
<td class="ItemStatus"> </td>
</tr>
<tr>
<td>Ownership:</td>
<td class="ItemOwnership"> </td>
</tr>
<tr>
<td>Link:</td>
<td class="ItemLink"> </td>
</tr>
</table>
</div>
在我对此的有限了解中，我从来没有遇到过这样的问题，即浏览器在我看到萤火虫对此有何评论之前就崩溃了。任何人都可以帮助我了解这里可能发生的事情。任何帮助深表感谢。