Динамическое добавление DIV элемента из HTML закодированной строки, содержащей Div и сценарии разметки

голоса
4

У меня есть питон приложение, которое проходит 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>

Что я делаю неправильно здесь?

Задан 16/09/2014 в 01:27
источник пользователем
На других языках...                            


6 ответов

голоса
2

Проблема это вы выполняете d3.js коды перед загрузкой d3js file.you могли бы хотеть смотреть в jQuery.getScript

Что-то вроде,

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

  //d3.js stuff here

});

Добавлено:

Кроме того, ваш текущий сценарий, вероятно, не будет даже загрузить d3.js file.you должны использовать что-то подобное,

<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>
Ответил 23/09/2014 в 06:06
источник пользователем

голоса
3

или просто вы можете использовать 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 + "!"; });
});
Ответил 23/09/2014 в 06:20
источник пользователем

голоса
5

После того, как вы приложили свои элементы делают 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;
};

Эта функция возвращает сценарии в массиве. Фильтр по массиву, пока вы не найдете скрипт вы после, а затем Eval его.

var scripts = getScriptsAsText();
eval(scripts[0])
Ответил 23/09/2014 в 12:58
источник пользователем

голоса
0

Скрипт загружается асинхронно, который по существу означает, что 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);

Надеюсь это поможет

Ответил 29/09/2014 в 05:51
источник пользователем

голоса
0

Попробуйте регулировочную часть в 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>

Ответил 29/09/2014 в 23:27
источник пользователем

голоса
0

Я пробовал ниже, и это сработало. Я преобразовал свой код в функцию, где вы оказываете сценарий первым и последующий вызов функции.

<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>
Ответил 30/09/2014 в 03:50
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more