PHP脚本和HTML - 这适用于Firefox和Chrome，但不适用于IE

Question

below is what I'm attempting to use for my site, this php page shows up without any issues in Firefox, and Chrome.

For some reason it doesn't appear to be working up in IE(tested on 8 and 9) I dont really know what is wrong here.

The error I am getting in IE8 is "Not a valid 2d Array" this appears to be coming from the google hosted .js

I'm wondering why this is occuring in IE8 only and not Chrome or Firefox?

<?php
  // Top snippet of code comes from:
  // www.ip2nation.com/ip2nation/Sample_Scripts/Output_Full_Country_Name
  // and adapted as necessary.

    $server   = 'sanitized'; // MySQL hostname
    $username = 'sanitized'; // MySQL username
    $password = 'sanitized'; // MySQL password
    $dbname   = 'sanitized'; // MySQL db name

    // 1 address per line, or feed with a DB if you're feeling clever.        
    $lines = file('blocklist.txt'); 

    $db = mysql_connect($server, $username, $password) or die(mysql_error());
          mysql_select_db($dbname) or die(mysql_error());

    $bans = array();
    foreach ($lines as $lnum => $line) 
    {
            $l=rtrim($line);
            $sql = 'SELECT 
                        c.country 
                    FROM 
                        ip2nationCountries c,
                        ip2nation i                                                                                                                                             
                    WHERE                                                                                                                                                       
                        i.ip < INET_ATON("'.$l.'")                                                                                                                              
                        AND                                                                                                                                                     
                     c.code = i.country                                                                                                                                         
                    ORDER BY                                                                                                                                                    
                    i.ip DESC                                                                                                                                                   
                    LIMIT 0,1';                                                                                                                                                 
            list($cc) = mysql_fetch_row(mysql_query($sql));                                                                                                                     

            if ($cc != "")                                                                                                                                                      
                    if(empty($bans["$cc"]))                                                                                                                                     
                    {                                                                                                                                                           
                            $bans["$cc"] = 1;                                                                                                                                   
                    }                                                                                                                                                           
                    else                                                                                                                                                       
                    {                                                                                                                                                           
                            $bans["$cc"]++;                                                                                                                                     
                    }                                                                                                                                                           

    }                                                                                                                                                                           

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see     www.w3.org">
<script type='text/javascript' src='https://www.google.com/jsapi'>
</script>
<script type='text/javascript'>

 google.load('visualization', '1', {'packages': ['geochart']});                                                                                                                 
 google.setOnLoadCallback(drawRegionsMap);                                                                                                                                      

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
    ['Country','Blocks'],
  <?php
    foreach ($bans as $key => $value)
                print"['$key', $value],
";
    ?>
    ]);

    var options = {
                    backgroundColor : '#baecfd',
                    colors : ['#FFFFFF', '#FF0000']
                    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
};
</script>
<title></title>

<style type="text/css">
 div.c1 {width: 900px; height: 500px;}
</style>
</head>
<body>
<div id="chart_div" class="c1"></div>
</body>
</html>

The code when compiled in IE is:

<html>                                                                                                                                                                              
  <head>                                                                                                                                                                            
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>                                                                                                     
    <script type='text/javascript'>                                                                                                                                                 
     google.load('visualization', '1', {'packages': ['geochart']});                                                                                                                 
     google.setOnLoadCallback(drawRegionsMap);                                                                                                                                      

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
    ['Country','Blocks']
  ['Japan', 11]
['United States', 45]
['Argentina', 1]
['Brazil', 1]
['Bosnia and Herzegovina', 1]
['Germany', 4]
['France', 2]
['Russia', 5]
['China', 24]
['Thailand', 1]
['New Zealand (Aotearoa)', 1]
['Turkey', 1]
['Korea (South)', 6]
['Panama', 2]
['Taiwan', 6]
['Canada', 14]
['Luxembourg', 1]
['United Kingdom', 1]
['Philippines', 1]
['Singapore', 3]
['Switzerland', 2]
['Hong Kong', 2]
    ]);

    var options = {
                    backgroundColor : '#25383c',
                    colors : ['#FFFFFF', '#FF0000']
                    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The code when compiled in Chrome is:

<html>                                                                                                                                                                              
  <head>                                                                                                                                                                            
<script type='text/javascript' src='https://www.google.com/jsapi'></script>                                                                                                     
<script type='text/javascript'>                                                                                                                                                 
 google.load('visualization', '1', {'packages': ['geochart']});                                                                                                                 
 google.setOnLoadCallback(drawRegionsMap);                                                                                                                                      

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
    ['Country','Blocks'],
  ['Japan', 11],
['United States', 45],
['Argentina', 1],
['Brazil', 1],
['Bosnia and Herzegovina', 1],
['Germany', 4],
['France', 2],
['Russia', 5],
['China', 24],
['Thailand', 1],
['New Zealand (Aotearoa)', 1],
['Turkey', 1],
['Korea (South)', 6],
['Panama', 2],
['Taiwan', 6],
['Canada', 14],
['Luxembourg', 1],
['United Kingdom', 1],
['Philippines', 1],
['Singapore', 3],
['Switzerland', 2],
['Hong Kong', 2],
    ]);

    var options = {
                    backgroundColor : '#25383c',
                        colors : ['#FFFFFF', '#FF0000']
                        };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Answer 1

var data = google.visualization.arrayToDataTable([
    ['Country','Blocks'],
  <?php
    foreach ($bans as $key => $value)
                print"['$key', $value],
";
    ?>
    ]);

Will return:

var data = google.visualization.arrayToDataTable([
    ['key1', value1],
    ['key2', value2],
]);

The extra comma at the end of the second one will break it. See this:

http://www.openjs.com/articles/ie/array_comma_problem.php

var sample = {
    'hello':'world',
    'foo':'bar', //This is 'the last comma'
}

alert("Hello World");

http://jsfiddle.net/A5VMW/

In most browsers, the final ',' is optional - its presence will not make any difference in the script. But IE will decide to do something that defies explanation - it just ignores everything after that bit of code. The 'Hello World' alert will never be seen in an IE browser.

Also see: https://stackoverflow.com/a/5139395/504299 :

Historically speaking, ES3 disallowed having a trailing comma when defining an object literal. This was one thing that IE did get right, but most other bowser vendors went south and did allow the trailing comma. So technically it was a bug in the other browsers that supported it.