Как разместить элемент dom в HTML без его рендеринга?

Question

Мне нужно разместить html/javascript-код на странице html, которую я не хочу отображать/запускать при загрузке страницы.

Я хочу получить этот контент позже с `innerHTML 'и использовать его динамически.

Как можно сохранить код на странице html, чтобы браузеры игнорировали его, но с ним можно управлять с помощью Javascript dom.

<script norun="true" type="text/xml"> 
      <script type="text/javascript"></script> 
      <div>html</div> 
</script> 

Приведенный выше код не работает, потому что закрывающий тег внутреннего <script> тега закрывает родительский «текст/XML» тип сценария. Нужен корс-платформенный метод, чтобы держать JS/HTML внутри бездействующим и неповрежденным.

Answer 1

Когда я делаю подобное (как правило, с фрагментами просмотра страниц в стиле SPA), я обычно придерживаюсь подхода к тегу сценария, аналогичного тому, что вы делали. Это предполагает, что я использую Hogan.js, но вы можете игнорировать эти данные для примера:

<script type="text/hogan-template" id="tweet-template"> 
    <div class="tweet"> 
    <div class="username">{{username}}</div> 
    <div class="body">{{body}}</div> 
    <div class="date-posted">{{posted}}</div> 
    </div> 
</script> 

Отсюда вы можете получить его с помощью JavaScript, когда вам это нужно, и браузер игнорирует его как HTML.

var tweetTemplateEl = document.querySelector("#tweet-template"), 
    tweetTemplate = hogan.compile(tweetTemplateEl.innerHTML); 

var tweetList = document.querySelector("#tweet-list"), 
    tweetItem = document.createElement("li"); 

tweetItem.innerHTML = tweetTemplate.render(tweetData); 
tweetList.appendChild(tweetItem); 

Для JavaScript вы можете использовать что-то вроде заполнителя на странице. Я не совсем уверен, что самый семантический тег для использования, поэтому я буду использовать div, поскольку это, как правило, переход к тегу «по умолчанию». Так, на месте, где бы Вы разместили включаемый вы могли бы просто сделать:

<div class="script-placeholder" id="some_js_file_name" data-href="/js/some_js_file_name.js"></div> 

Это может быть использован несколькими способами, но вот один вариант:

window.require = function(fileName) { 
    var body = document.querySelector("body"), 
     placeholder = document.querySelector(["#", fileName].join("")), 
     src = placeholder.dataset.href, 
     script = document.createElement("script"); 
    script.src = src; 
    body.appendChild(script); 
}; 

Что вы можете добавить к тому, что вы хотели бы инициировать требование:

someElement.addEventListener("click", function(e) { 
    require("some_js_file_name"); 
}); 

Это может быть то, что позволяет достичь того, чего вы хотите достичь.

ПРИМЕЧАНИЕ: Важно отметить, что если вы действительно хотите пойти по пути динамической нагрузки, вы должны, вероятно, инвестировать в созданную библиотеку, чтобы выполнить это, как CommonJS, если вы хотите, чтобы стиль требуемого, как я показал Вот. Этот рукописный образец - это просто, это образец, который даст вам представление о том, что происходит.

Answer 2

Будущее решение: HTML5 <template>. Но это не поддерживается в IE

Безопасного решения: сущность-побег или base64 кодирование и декодирование в JavaScript

Hacky: <svg style="display:none;"><![CDATA[ your inert content here ]]></svg>, так как html5 сами по себе не позволяют CDATA, но исключение сделано для иностранного контента, т.е. SVG и MathML

Answer 3

Wrap код в HTML комментарий: <!-- ... -->

Браузеры не будет разбирать или сделать что-либо внутри комментария.

Если вы хотите инициировать рендеринг, раскомментируйте код.Это можно сделать, обернув комментарий в идентифицируемом элементе, получив его innerHTML, удалив синтаксис комментария и сбросив внутреннийHTML этого элемента, чтобы он был разглашен без разглашения.

http://jsfiddle.net/92du461p/2/

<button id="b">Show hidden content</button> 
<div id="delay-render"><!-- <p>hide me</p> --></div> 
<script> 
    var r = document.getElementById('delay-render'); 
    var b = document.getElementById('b'); 
    b.addEventListener('click', function() { 
    r.innerHTML = r.innerHTML.match(/^<!--(.*)-->$/)[1] 
    }); 
</script>