Question

我需要在html页面中放置html / javascript代码，我不想在页面加载时渲染/运行。

我想稍后使用`innerHTML'获取此内容，并将其用于动态。

如何将代码保存在html页面中，以便浏览器忽略它，但可以使用Javascript dom交互操作。

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

上面的代码不起作用，因为内部<script>标记的结束标记关闭了父“text / xml”类型脚本。需要使用corss-platform方法来保持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，因为它通常会转到＆＃34;默认＆＃34;标签。因此，代替您放置包含的地方，您可以这样做：

<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不支持它

安全解决方案：javascript中的entity-escape或base64编码和解码

Hacky：<svg style="display:none;"><![CDATA[ your inert content here ]]></svg>，因为html5本身不允许使用cdata但是异常是针对外来内容的，例如svg和mathml

Answer 3

将代码包装在HTML评论中：

浏览器不会在评论中解析或呈现任何内容。

如果要启动渲染，请取消注释代码。这可以通过将注释包装在可识别的元素中，获取其innerHTML，删除注释语法，以及将元素的innerHTML重置为实时未注释的标记来完成。

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>

如何在不渲染的情况下将dom元素放在HTML中？

3 个答案: