Question

我无法找出$('#valvonta_d').html(data);工作原因，但valvonta_div.innerHTML = data;根本无效。

我有一些JavaScript / jQuery代码：

$(document).ready(function(){
  valvonta = function() {
    var kaavio = 106;

    jQuery.post("hae_tilanteet.php", {
      kaavio: kaavio
    }).done(function(data) {
      // the following would work, but I prefer using JavaScript:
      // $('#valvonta_d').html(data);

      // this is not working
      var valvonta_div = document.getElementById('valvonta_d');
      valvonta_div.innerHTML = data;
    });
  };

  setTimeout(valvonta, 6000);
};

我有这个HTML代码：

<div id="valvonta_d"></div>

Answer 1

可变数据的值为<script>...</script>。

<script>元素通过innerHTML are intentionally disabled/ignored by the browser插入，因为它可能允许跨站点脚本编写。

您必须通过单独检索其内容来自行评估。

}).done(function(data) {
    var valvonta_div = document.getElementById('valvonta_d');
    valvonta_div.innerHTML = data;

    Array.from(valvonta_div.querySelectorAll('script')).forEach(function (script) {
        if (script.getAttribute('src')) return;

        // `(0, ...)` for global eval via indirect reference
        (0, eval)(script.textContent || '');
    });
});

但是，如果可以的话，尽量避免使用eval()。

至少，您应该能够将<script>的通用表单定义为function，并在此之前包含在页面中。

function prepareVolvanta(kaavio, container) {
    // ...
}

然后，在内容准备就绪时调用该函数。

var valvonta_div = document.getElementById('valvonta_d');
valvonta_div.innerHTML = data; // content markup only

prepareVolvanta(kaavio, valvonta_div);

相关：Can scripts be inserted with innerHTML?

jQuery .html（）工作正常，但JavaScript .innerHTML无效

1 个答案: