Javascript - 使用 <script> 标签包含另一个脚本

Javascript - include another script by using the <script> tag?

本文关键字：标签 包含 另一个 脚本 script Javascript 使用      更新时间：2023-09-26

所以我有一个将字符串写入div的函数。该字符串被声明为内容，它由 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>

有没有办法避免将脚本标签写成字符串？ 而是作为实际脚本？

提前感谢您的任何帮助:)

你不能

那样做。您无法添加脚本标记并通过编写 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 事件处理程序，该处理程序将在脚本完全下载后触发。

由于措辞的原因，我不确定这个问题，但是您不需要两个<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

好的，

基本上你想在你的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 文件

如果我理解正确，您将内容作为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); 
    }
 }
相关文章：