Question

对于这里的项目，我必须在一个大的HTML文件中创建一个包含几个章节和大量文本的帮助文件，但由于文本必须翻译成不同的语言，我想从一个文本中加载文本外部文本文件。

我已经看过如下话题：

将.txt中的外部文本加载到html文件
jQuery load txt file .html（）

但我无法使其发挥作用。

作为测试，我创建了一个非常基本的html文件：

<html>
<head>
 <script type="text/javascript">
  $('#text').load("/textdoc.txt");
 </script>
</head>
<body>

 <div id="text">

 </div>
</body>

但即使这样也行不通。我希望在＆＃34; textdoc.txt＆＃34;中看到文字。 <div id="text"> </div>中的文件。但它仍然是空白。文本文档与html文件位于同一目录中。我在这做错了什么？

作为旁注，系统我为IE7上的运行创建了帮助文件。它甚至可以为此工作吗？

Answer 1

正如MrN00b所说，我假设你已经省略了jQuery js文件本身的包含？如果您还没有，请加入它，因为它不是网页的隐含部分。

由于您的代码位于其引用的文档中的项目（id="text")）之前，您需要等待文档完成加载：

使用其中一个，以便您的jQuery将等待DOM完成加载：

传统：

     $(document).ready(function(){
         $('#text').load("/textdoc.txt");
     });

快捷方式：

     $(function(){
         $('#text').load("/textdoc.txt");
     });

安全（本地范围内的$）：

     jQuery(function($){
         $('#text').load("/textdoc.txt");
     });

注意：这看起来有点像你可能会看到的IIFE（立即调用的函数表达式），但它不是。

以下只是执行范围为$的代码，但不等待加载。

     (function($){
         // I am still run immediately as this is an IIFE!
         $('#text').load("/textdoc.txt");
     })(jQuery);

e.g：

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    
  <script type="text/javascript">
     jQuery(function($){
         $('#text').load("/textdoc.txt");
     });
  </script>
</head>
<body>

 <div id="text">

 </div>
</body>

或者，最糟糕的情况是，只需将代码放在body元素的末尾而不是头部

<html>
<head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    
</head>
<body>

 <div id="text">

 </div>
 <script type="text/javascript">
     // This will now work as the element referenced must already be loaded
     $('#text').load("/textdoc.txt");
 </script>
</body>

将外部文本加载到HTML

1 个答案:

传统：

快捷方式：

安全（本地范围内的$）：

e.g：