Question

我有python应用程序将html传递给页面作为json有效负载的一部分。我在该页面尝试做的是解码html并动态地将其添加到DOM。 html标记用于包含子脚本元素的Div元素。这是我的代码，它打印出解码后的HTML，但实际上并没有执行脚本：

<div  id="parentDiv">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type='text/javascript'>
        var child_div = "&lt;div id=&#39;testDiv&#39;&gt;\n &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;\n &lt;script&gt;\n d3.select(&quot;#testDiv&quot;) \n .data([4, 8, 15, 16, 23, 42])\n .enter().append(&quot;p&quot;)\n .text(function(d) { return &quot;I'm number &quot; + d + &quot;!&quot;;\n });\n &lt;/script&gt;\n &lt;/div&gt;";
        decoded = $('<div />').html(child_div).text();
        console.log(decoded);
        $("#parentDiv").append(decoded);
    </script>
</div>

但是，如果我采用上面代码中记录的html并从中创建一个页面，它可以正常执行脚本。这就是解码的html看起来像什么以及我希望动态添加到父div：

   <div  id="parentDiv">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <div id='testDiv'>
       <script src="http://d3js.org/d3.v3.min.js"></script>
       <script>
           d3.select("#testDiv")
          .data([4, 8, 15, 16, 23, 42])
          .enter().append("p")
          .text(function(d) { return "I'm number " + d + "!"; });
       </script>
    </div>
</div>

我在这里做错了什么？

Answer 1

添加元素后，执行DOM中存在的DOM，但脚本尚未初始化。

您可以使用以下内容访问脚本标记：

function getScriptsAsText() {
    var div = document.createElement('div');
    var scripts = [];
    var scriptNodes = document.getElementsByTagName('script');

    for (var i = 0, iLen = scriptNodes.length; i < iLen; i++) {
        div.appendChild(scriptNodes[i].cloneNode(true));
        scripts.push(div.innerHTML);
        div.removeChild(div.firstChild);
    }
    return scripts;
};

此函数将返回数组中的脚本。过滤数组，直到找到您所在的脚本，然后评估它。

var scripts = getScriptsAsText();
eval(scripts[0])

Answer 2

或简单的你可以使用http://www.dustindiaz.com/scriptjs :) 简单

$script('http://d3js.org/d3.v3.min.js', function(){
   d3.select("#testDiv")
          .data([4, 8, 15, 16, 23, 42])
          .enter().append("p")
          .text(function(d) { return "I'm number " + d + "!"; });
});

Answer 3

问题是你在加载d3js文件之前正在执行d3.js代码。你可能想看看jQuery.getScript

类似的东西，

$.getScript('http://d3js.org/d3.v3.min.js', function(){

  //d3.js stuff here

});

添加了：

此外，您当前的脚本可能甚至无法加载d3.js文件。您必须使用类似的内容，

<script>

 var scref=document.createElement('script');

 scref.setAttribute("type","text/javascript")

 scref.setAttribute("src", 'http://d3js.org/d3.v3.min.js');

 document.getElementById("parentDiv").appendChild(scref);

</script>

Answer 4

脚本是异步加载的，这实际上意味着它下面的JavaScript在d3.v3.min.js中的函数和变量存在之前执行。标准JQuery包含一个名为$ .getScript（）的函数，该函数阻止执行脚本，直到指定为第一个参数的依赖项完成加载。您必须将服务器生成的代码更改为如下所示：

<div id='testDiv'>
<script>
$.getScript('http://d3js.org/d3.v3.min.js', function(){
    d3.select("#testDiv") 
    .data([4, 8, 15, 16, 23, 42])
    .enter().append("p")
    .text(function(d){ 
        return "I'm number " + d + "!";
    });
});
</script>
</div>

最后根据您的示例，使用以下命令执行它：

var child_div = **ABOVE MENTIONED ENCODED VERSION**;
var decoded = $('<div />').html(child_div).text();
$("#parentDiv").append(decoded);

希望这有帮助

Answer 5

尝试在OP上调整件

<div  id="parentDiv">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- added 
         `<script src="http://d3js.org/d3.v3.min.js"></script>`
    -->
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript'>
    // removed
    // `&lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;\n`
        var child_div = "&lt;div id=&#39;testDiv&#39;&gt;\n &lt;script&gt;\n d3.select(&quot;#testDiv&quot;) \n .data([4, 8, 15, 16, 23, 42])\n .enter().append(&quot;p&quot;)\n .text(function(d) { return &quot;I'm number &quot; + d + &quot;!&quot;;\n });\n &lt;/script&gt;\n &lt;/div&gt;";
        decoded = $('<div />').html(child_div).text();
        console.log(decoded);
        $("#parentDiv").append(decoded);
    </script>
</div>

Answer 6

我尝试了下面的工作。我将您的代码转换为首先渲染脚本然后调用函数的函数。

<html><head></head><body>

<div id="parentDiv">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type='text/javascript'>
        function f1() {
            var child_div = "&lt;div id=&#39;testDiv&#39;&gt;\n &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;\n &lt;script&gt;\n d3.select(&quot;#testDiv&quot;) \n .data([4, 8, 15, 16, 23, 42])\n .enter().append(&quot;p&quot;)\n .text(function(d) { return &quot;I'm number &quot; + d + &quot;!&quot;;\n });\n &lt;/script&gt;\n &lt;/div&gt;";
            decoded = $('<div />').html(child_div).text();
            alert(decoded);

            console.log(decoded);
            $("#parentDiv").append(decoded);
        }

        f1();
    </script>
</div></body></html>

从包含Div和Script标记的html编码字符串动态添加div元素

6 个答案: