将 jquery 脚本添加到我的 html 会导致空白页答案

【问题标题】：Adding a jquery script to my html results in a blank page将 jquery 脚本添加到我的 html 会导致空白页
【发布时间】：2014-11-13 00:38:38
【问题描述】：

我有一个工作的 html 页面，我想做的是使用 jquery 来包含页脚。但是，每当我实际将任何 jquery 放入标签中时，它都会导致页面变为空白，我不确定出了什么问题。

这是页面的缩略版：

<!DOCTYPE html>
<html id="index-page">
<head>
    <title>Data</title>
    <!-- TODO: SEO goes here-->
    <link rel="stylesheet" type="text/css" href="libs/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <!-- Fonts -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic">
</head>
<body>
    <h1> Stuff goes here </h1>
    <h2> other stuff here </h2>
    <div id="footer"></div>

    <!-- ============== Scripts ============== -->
        <!-- extern libs -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- TODO: switch out with our cdn-->
            <script>
                        $('#footer').load('footer.html');
            </script>
        <!-- config/init -->
            <script src="scripts/init.js"></script>
            <!-- services -->
            <!-- modules -->
                <!-- These files bind DOM elements to the JS Application Logic -->
                <script src="scripts/modules/indirect.hover.module.js"></script>
    </body>
</html>

如果我取出包含加载 footer.html 的代码的标签，一切都会正常加载。但是一旦我添加了这些标签，页面就是空白的，我不知道为什么。

footer.html 的最小化版本如下所示：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="libs/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="images/fonts/fonts.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic">
    <script src="//code.jquery.com/jquery-1.11.0.js"></script>
</head>
<body>
    <footer>
     <h1>stuff here</h1>
    </footer>
</body>
</html>

【问题讨论】：

如果您删除所有其他脚本，它是否有效？您可以在 JSFiddle 上发布最小的不工作代码，以便我们尝试吗？
多少个标签您尝试加载外部页脚？能否提供footer.html的HTML内容？
这里是您可能会对 HTML
标签感兴趣的链接 (w3schools.com/tags/tag_footer.asp)。
我已经添加了footer.html的代码。
Ludovic：删除其他脚本没有帮助。

标签： jquery html

【解决方案1】：

准备好使用文档。

另外...footer.html 实际上是服务于当前文件的目录中的可用文件吗？？
因为如果不是...可能是脚本找不到文件的情况。也许您需要 ('../footer.html') 或类似的东西。检查你的目录结构

        <script>
        $(document).ready(function(){
            $('#footer').load('footer.html');
        });
        </script>

从显示 footer.html 的更新代码来看

您应该将您的页脚文件更改为只是

 <footer>
   <h1>stuff here</h1>
  </footer>

就是这样。。你真的不需要重新声明任何东西。（脚本、css 头、html 等）只需拥有您要加载的内容。

摆脱 doctype、css 文件和所有其他不相关的代码

【讨论】：

footer.html 与 index.html 位于同一文件夹中，该文件夹是包含脚本的页面，我尝试使用准备好的文档。似乎发生的情况是页面暂时加载，然后变为空白。