作成中の小さなページで、Chromeと1つのAjaxリクエストで悪夢を見ています。Javascript / jQueryに関しては大丈夫ですが、これは私を苛立たせています。
基本的に私はページhttp://www.neuralnode.com/STARMAN/を持っています（警告、これはChromeをクラッシュさせることがあるようです）そしてそれはFirefoxとIE 9+のほとんどのバージョンで動作しますが、chromeで試してみると動作しませんまったく機能しません。そのままにしておくと、Chromeがクラッシュします。何が悪いのかわからず、あちこち探してきました。コードを説明しましょう：
ベース2ページには、index.phpとviewer.phpがあります。index.phpは、現在、さまざまな方法を使用してviewer.phpをロードしますが、$.ajax私も試しました。$.get.load()
わかりやすくするために、他のすべてのJavascript機能を削除した完全なコードを次に示します。ライブサイトでは、ajaxロードを除くすべてのコードがコメント化されています。
index.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ループofcであり、一般的に厄介なコードを持っていますが、これは他の2つのメインブラウザで動作するので何にも影響しないはずです-私は後でそれを片付ける予定です、ただする必要がありますこれを理解する...
<?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>
これについての私の限られた知識では、firebugがそれについて何を言っているかさえ見ることができる前に、ブラウザがクラッシュするこのような問題に遭遇したことはありません。誰かが私がここで起こっているかもしれないことに光を当てるのを手伝ってもらえますか？どんな助けでも大歓迎です。