Question

所以我有一个将字符串写入div的函数。该字符串被声明为 content ，它由html代码组成，如下所示：

<h2>This is a test result</h2>
<script type="text/javascript" src="example_content.js"></script>
<script type="text/javascript"> document.write(example_content); </script>

其中 example_content.js ：

example_content = '<p>some text some text some text some text some text</p>'
+ '<p>some more text....</p>'
+ '<hr />'
+ '<p>End of text</p>';

问题是，而不是在div中得到这个：

<h2>This is a test result</h2>
<p>some text some text some text some text some text</p>
<p>some more text....</p>
<hr />
<p>End of Text</p>

我最终，文学上，这个：

<h2>This is a test result/h2>
<script type="text/javascript" src="example_content.js"></script>
<script type="text/javascript"> document.write(example_content); </script>

有没有办法避免将脚本标记写为字符串？但作为一个实际的脚本？

感谢您提前提供任何帮助：）

Answer 1

你做不到。您无法通过编写HTML来添加脚本标记并执行它们。如果必须动态加载脚本，则应将它们添加到DOM中。您可以尝试加载外部脚本文件并执行该方法。

(function(document){
    var s = document.createElement('script');
    s.id = "external_content";
    s.async = true;
    s.src = "example_content.js";
    document.getElementsByTagName('head')[0].appendChild(s);
    s.onload = function() {
        document.write(example_content);
    }
}(document));

它基本上做的是它动态创建一个新的脚本元素并将其添加到DOM。它还设置了一个onload事件处理程序，一旦完全下载脚本就会触发它。

Answer 2

我不确定这个问题，因为你不需要两个<script>标签。在example_content.js地点document.write(example_content);的末尾，然后从html文件中删除<script type="text/javascript"> document.write(example_content); </script>。

此外，如果这是您想要的，我建议您使用object.innerHTML而不是document.write，并将脚本放在页面底部。

如果这不起作用或不是您想要的，请发表评论，我将删除并使用JSLint作为示例。

以下是一些信息：https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

Answer 3

好的，所以基本上你想在你的div的内容中写HTML。假设您有一个具有以下ID的div：myContentDiv

    /**
    *  NOTICE HOW IM USING \ before " TO ESCAPE THE CHARACTERS INSIDE THE HTML STRING
    */
    var yourCustomHTMLString = "<h1>this is a tag</h1><div class=\"yourClass\">something</div>";

    var contentDiv = document.getElementById('myContentDiv');
    contentDiv.innerHTML = yourCustomHTMLString;

此外，在您的标记中，您需要为JS指定触发器，例如onload触发器。

window.onload = function(){
document.write(example_content);
}

现在说你想要一个将HTML字符串加载到div中的函数。

function loadContent(HTMLstring, targetDivID)
{
   var myDiv = document.getElementById(targetDivID);
   myDiv.innerHTML = HTMLstring; 
}

如果您尝试在另一个JS脚本中包含JS脚本，则需要Ajax。如果您使用的是JS库，那么所有常见的库都预定义了脚本加载方法。

Dynamically load a JavaScript file

Answer 4

如果我理解正确，您将内容作为innerHTML插入<div>，并且脚本不会执行。

据我所知，这是预期的行为，因为当你改变元素的innerHTML时，没有onLoad，document.ready等事件。

您可以解析<script>个节点的插入字符串。警告，这是一个非常“hacky”的事情，通常有更好的方法，例如使用各种脚本库的ajax函数的成功回调。

然而，这是我们曾经使用过的。这需要在您插入内容字符串后执行。请不要评判我，我还年轻，时间很短......

var div = document.getElementById("yourParentDiv");
if(div != null){
    var x = div.getElementsByTagName("script");
    for(var i=0;i<x.length;i++) {
       eval(x[i].text); 
    }
 }

Javascript - 使用<script>标记包含另一个脚本？</script>

4 个答案: