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

【问题标题】：Javascript - include another script by using the <script> tag?Javascript - 使用 <script> 标签包含另一个脚本？
【发布时间】：2012-08-06 15:48:15
【问题描述】：

所以我有一个将字符串写入 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>

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

提前感谢您的帮助:)

【问题讨论】：

不能把document.write(example_content);放到js文件里面吗？
您是否尝试将 HTML 代码放入脚本标签中？对不起，我没有得到这个问题。
@Дамян Станчев 不过，如果不会写成脚本，就写成字符串。

标签： javascript file function include eval

【解决方案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 事件处理程序，该处理程序将在脚本完全下载后触发。

【讨论】：

这可能真的有效，只是我收到未定义方法“appendChild”的错误
@ZyykSavvins 抱歉，这是我的错误。修复。立即尝试。
好的，所以脚本被添加到 DOM 中，但它被添加到底部，这意味着在需要访问它的脚本之后。任何机会，它可以放置在特定的插槽？甚至在顶部？因为它不依赖于任何其他脚本
@ZyykSavvins 你可以做的是在onload 事件中将依赖于这个脚本的其他脚本排队。但我不建议这样做，因为加载需要很长时间。更好的选择是只创建一个标志变量并将其设置为true 在onload 事件处理程序中。然后，您可以检查任何依赖脚本中的标志，如果仍未设置，则设置超时并在一两秒后调用脚本。

【解决方案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

【讨论】：

感谢您的回答。我知道我的问题有点含糊。我试图将 document.write 移动到文件中，但仍然如此。我正在尝试写
但被写为字符串而不是文件的实际内容：/
你能把这个放在 JSLint 上吗？还是上传屏幕截图？

【解决方案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

【讨论】：

div 还没有被创建，所以我不能用它的 id 来处理它。我拥有的是一个包含 HTML 字符串的对象和另一个使用该字符串将其写入另一个 div 的对象。我知道这听起来很复杂，这正是我当前项目的构建方式。
事件的触发器是什么？
首先会发生什么？我假设您在 JS 级别生成 div，然后您想写入它们。那是对的吗？如果唯一导致流量的事件是 onload，那么为什么需要这两个？高级 JS 库（如 Google Closure），具有 goog.dom.createDom 等方法。这样做是创建一个具有您想要的所有属性和文本的 domElement。因此，不要先创建 div，然后用内容填充它们，而是一次做所有事情。不明白为什么不，除非有一个事件必须触发所有这些（例如鼠标点击等）
就像这样：我有一个名为 Frame 的对象，它在屏幕上创建和控制一个类似于窗口的 div（可以拖动、调整大小、最大化、关闭等...）然后我有一个叫App的Object，用来扩展成子类。现在，每个子类都创建了 Window 对象的内容。因此，窗口内容的 div 是在放置

【解决方案4】：

如果我理解正确，您将 content 作为 innerHTML 插入到 <div> 中，脚本不会执行。

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

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

尽管如此，这是我们曾经使用过的。这需要在您插入 content 字符串后执行。请不要评判我，我还年轻，时间很短……

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); 
    }
 }

【讨论】：