Question

我对html很新，并试图建立一个网站。到目前为止，我有一个html文件，其中包含我的网站的标题，我想在我使用jQuery的加载函数为网站创建的所有页面中使用它。

基本上我想要做的就是将Header.html加载到Page.html。

这是Page.html中的代码：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Hello</title>

    <script type="text/javascript" src="jQuery.js"></script>

    <script type="text/javascript">
            $(document).ready(function () {
                $("#Header").load("Header.html");
            });

    </script>
</head>
<body>
    Hi
    <div id="Header"></div>
</body>
</html>

Header.html看起来像这样：

<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>

屏幕上唯一出现的是“嗨”。

Answer 1

看起来不错，除了src属性中的反斜杠应该是正斜杠。

你有没有特别的错误？

另外，正如已经指出的那样，PHP更适合这项工作。

<?php include 'header.php'; ?>

除了可访问性问题之外，还可能存在负面的SEO影响。

修改

假设你的jQuery路径是正确的，那么你发布的代码应该可以工作（它适用于我）。

要尝试/确定的事情：

您正在服务器上运行它（即不仅仅是在您的浏览器中打开文件，因为这将违反相同的原始策略）。检查地址栏中的地址是否以file：//

开头

确保jQuery库的路径正确

确保Page.html和Header.html位于同一文件夹

检查您的broswer的错误控制台。 Instructions

Answer 2

您可以使用iframe将html文件包含到div中。

否则你必须遵循一些服务器端包含方法。

喜欢，在php <?php include("includes/header.php"); ?>

中

Answer 3

你的代码看起来很好。你是在网络服务器上运行网站，例如视觉工作室（iis express）吗？你不能在本地运行它。 Ajax不会这样工作。

以chrome格式打开您的页面，然后按f12打开开发工具。转到网络选项卡。你看到在加载函数上触发了ajax请求吗？

顺便说一句，关于标题div， div不是一个自动关闭的标签。它是一个容器。最好用关闭标签关闭它。

否则，您可能会在某些浏览器中获得不可预测的结果。（我有一段时间没有检查过，但几年前就是这样，可能是在资源管理器8中）

Answer 4

jQuery(document).ready(function(){
  jQuery.ajax({
      url: 'header.html',
      type: 'get',
      success:function(data){
           jQuery('#header_container').html(data);
       }
  });
});

<div id="header_container">....</div>

请求返回的内容将进入header_container div

Answer 5

Div元素需要一个结束div标签，如<div></div>。没有必要从另一个js文件中调用一小段代码，只需在head元素中编写代码就像这样：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
    <div id="Header"></div>
</body>
</html>

不要害怕要求更多信息。

$。load（）http://api.jquery.com/load/

如何使用html文件作为div

5 个答案: