访问外部 JavaScript 文件并将内容放在 div 中的最佳方式？答案

【问题标题】：Best way to access external JavaScript file and place contents in div?访问外部 JavaScript 文件并将内容放在 div 中的最佳方式？
【发布时间】：2014-11-15 13:16:19
【问题描述】：

所以，假设您有一个想要从 javascript 文件加载的页面，它包含

temp.html 文件

<script src="example.js"></script>
<p class="one"></p>

现在在 example.js 文件中有一个函数是

    function getInfo() {
    var place = "foo"
    $(".one").html(place);
    }
//Edit currently I call the function inside the JS file

getInfo();

我的问题是如何连接这两个文件，以便外部 javascript 文件知道它指向第一个类的段落？通常，当这是在单个页面中时，您会调用该函数并设置信息。我见过 Jquery 的 getScript 方法和 load 方法。这适用于这里吗？关于如何解决这个问题的任何想法？如果您提供一些非常有用的代码。提前致谢。

【问题讨论】：

什么时候你希望getInfo()被调用？
@PM77-1 我希望在 js 文件中调用它。我目前在函数之后调用了 getInfo()。我不知道从临时文件中调用它是否更聪明
你还没有回答我的问题。请再读一遍。

标签： javascript jquery html ajax

【解决方案1】：

看起来您想在定义getInfo() 后立即执行它（即：example.js 已加载）。

你可以试试这个方法：

<script src="example.js" onload="getInfo();"></script>

在您的 example.js 中，将 getInfo() 更改为如下内容：

function getInfo() {
  $(document).ready(function() {
      var place = "foo"
      $(".one").html(place);
  });
}

【讨论】：

谢谢，这也是一种工作方式。谢谢！
@Jason 请接受最适合您的答案之一。

【解决方案2】：

您的语言令人困惑，但您可以使用 jQuery 的 $(document).ready 函数就足够了。一般来说，外部加载的文件应该在脚本中标签所在的位置执行。

一个技巧可能是在文档正文的末尾放置一个标签，给它一个 id，然后在那里使用 $('#id').ready() 。不过总的来说，您可以尝试使用间隔和超时从头开始编写嵌入概念（我猜您已经习惯了）。

    <div id="rdy">
    </div>
</body>

然后在你的文件中：

   $('#rdy').ready(getInfo);

只是我的补充意见，您应该考虑到 Google 这些天在做一些不太好的事情，它们早已远离“不作恶”的口头禅。

【讨论】：

对语言感到抱歉，但这只是我不明白该怎么做的事情之一
你已经掌握了它的一般窍门，你说的是在脚本运行时更新 DOM，但要确保首先加载你的 HTML——这将是一个教程长度，但我可以向您描述如何设置“setInterval”来检查文档长度的变化。您将从那里运行您的功能，但是您尝试更新的地方越多，这就会变得棘手。强烈推荐 mustache.js 做这类事情。
这很有趣，因为当我只是在一页上尝试这个时，我确实实现了 setInterval 并且一切正常。然而，现在似乎没有任何效果，我很困惑
哈哈，在浏览器控制台中运行“getInfo()”然后会发生什么？

【解决方案3】：

如果我们假设您有一个包含此内容的 JavaScript 文件：

function getInfo() {
    var place = "foo"
    $(".one").html(place);
}

那么您的标记将如下所示：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="example.js"></script>
        <script>
            $(function(){
                getInfo();
            });
        </script>
    </head>
    <body>
        <p class="one"></p>
    </body>
</html>

$(function(){ ... }); 只是$(document).ready(function(){ ... }); 的简化版本。它们都或多或少地处理了onload 事件，该事件在页面加载完成时触发。

【讨论】：

Tieson，我仍然无法从这段代码中得到任何东西。你有同样的问题吗？我想知道是不是因为它无法识别html方法或其他东西
嗯，它是缺少对 jQuery 库的引用，所以它不会按原样工作。我已更新示例以包含 CDN 参考。
太棒了。这一切正常，您认为您可以在其中添加另一个功能并查看它是否有效？
@Jason 我建议你先尝试一下你想要完成的任何事情，如果/当你遇到困难时，然后再问一个问题。如果有助于理解新问题的上下文，您可以随时在新问题中引用之前的问题。