Javascript-使用<script> tag?

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>

有没有办法避免将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); 然后删除<script type="text/javascript"> document.write(example_content); </script> 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库，则所有常用库都预定义了脚本加载方法。

动态加载JavaScript文件

Answer 4

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

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

您可以为<script>节点解析插入的字符串。 警告 ，这是一件非常“棘手的事情”，通常有更好的方法，例如使用各种脚本库的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); 
    }
 }