IE 11 Not displaying anything at all

问题

The following code is working in all browser but EI11. There are no errors in the console or displayed anywhere. I have been on Stack Overflow for the last two day trying all of the other answered questions, anything from cache breaking, adding header option. At a lost here, any guidance would be grateful and i'll add any additional info ass needed.

HTML

<!DOCTYPE html>
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API CAll</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>
<style>
* {
    box-sizing: border-box;
}

div p{
    width: 100px;
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}
.row {
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
</style>
</head>

<body>

   <div id="content" class="row"></div>
 </body>
 </html>

 $( document ).ready(function() {

  var api_url2 = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=TRY,BRL,MXN';

    $.ajax({
        type: 'GET',
        url: api_url2 ,
        dataType: 'json',
        success: function(result){

        const objVal = result.rates;             
        var keys = [], k, i, len;

        for (k in objVal) {
            if (objVal.hasOwnProperty(k)) {
                keys.push(k);
            }
        }

        keys.sort();

          len = keys.length;

          for (i = 0; i < len; i++) {
            k = keys[i];
            console.log(k + ':' + objVal[k]);
            let column = $("<div class='column'></div>");

                for (j = 0; j < 3; j++) {
                // TODO: Should you match .row here, or use a specific row?
                $(".row").append(column);
                // Use jQuery to create the P element instead of the DOM.
                let para = $('<p></p>');
                // Use the jQuery text() method to set the content.  (Prevents element
                // injection by server via innerHTML.)
                para.text(`${objVal[k].toFixed(3)} ${k} `);

                // Append this element only to the one div we created this iteration of the
                // outer loop.
                column.append(para);
                }
          }


        }
  })
 });

回答1:

IE11 doesn't support ES6. That means, you need to replace:

Template literals with old ES5 syntax 'string' + 'string'
let/const with var (as @lostero mentioned, let/const are supported in IE11, but not fully), so it is better to avoid them.

or use ES6+ > ES5 transpiler like Babel

Anyway, here is code for IE:

$( document ).ready(function() {

  var api_url2 = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=TRY,BRL,MXN';

    $.ajax({
        type: 'GET',
        url: api_url2 ,
        dataType: 'json',
        success: function(result){

        const objVal = result.rates;             
        var keys = [], k, i, len;

        for (k in objVal) {
            if (objVal.hasOwnProperty(k)) {
                keys.push(k);
            }
        }

        keys.sort();

          len = keys.length;

          for (i = 0; i < len; i++) {
            k = keys[i];
            console.log(k + ':' + objVal[k]);
            var column = $("<div class='column'></div>");

                for (j = 0; j < 3; j++) {
                // TODO: Should you match .row here, or use a specific row?
                $(".row").append(column);
                // Use jQuery to create the P element instead of the DOM.
                var para = $('<p></p>');
                // Use the jQuery text() method to set the content.  (Prevents element
                // injection by server via innerHTML.)
                para.text(objVal[k].toFixed(3) + k );

                // Append this element only to the one div we created this iteration of the
                // outer loop.
                column.append(para);
                }
          }


        }
  })
 });

* {
    box-sizing: border-box;
}

div p{
    width: 100px;
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}
.row {
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="content" class="row"></div>

Live code

来源：https://stackoverflow.com/questions/57778150/ie-11-not-displaying-anything-at-all

标签

javascript

jquery

ajax

internet-explorer-11