Question

我正在构建一个小页面，对Chrome和一个Ajax请求进行正确的噩梦。当谈到Javascript / jQuery时，我很好，但这让我疯了。

基本上我有页面http://www.neuralnode.com/STARMAN/（警告，这似乎有时会使Chrome崩溃）并且它适用于大多数版本的Firefox和IE 9+但是每当我在Chrome上试用它时根本不起作用，那么如果你让它太长，Chrome就会崩溃。我不知道出了什么问题，我到处搜遍了。让我解释一下代码：

我们有2页，index.php和viewer.php。 index.php目前使用各种方法$.ajax加载viewer.php，但我也尝试了$.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，它一般有凌乱的代码，但这不应该影响任何东西，因为它在其他两个主要浏览器中工作 - 我打算稍后整理它，只需要想出来......

<?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">&nbsp;</td>
  </tr>
  <tr>
    <td>Grid:</td>
    <td class="ItemGrid">&nbsp;</td>
  </tr>
  <tr>
    <td>Cordinates:</td>
    <td class="ItemCords">&nbsp;</td>
  </tr>
  <tr>
    <td>Status:</td>
    <td class="ItemStatus">&nbsp;</td>
  </tr>
  <tr>
    <td>Ownership:</td>
    <td class="ItemOwnership">&nbsp;</td>
  </tr>
  <tr>
    <td>Link:</td>
    <td class="ItemLink">&nbsp;</td>
  </tr>
</table>

</div>

在我对此有限的了解中，我从来没有遇到过像浏览器崩溃的问题，我甚至无法看到萤火虫对此有何看法。任何人都可以帮助我阐明这里可能发生的事情。非常感谢任何帮助。

Answer 1

jQuery支持Google Chrome。看来你的jQuery没有加载。

您的jQuery脚本网址似乎拼写错误。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

请改为尝试：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Chrome不想接受$ Ajax，$ .Get，.load（）或我尝试的任何其他内容

1 个答案: