为什么使用 jquery 加载到另一个 html 文件的 html 显示不正确？答案

【问题标题】：Why html loaded to another html file with jquery does not appear correctly?为什么使用 jquery 加载到另一个 html 文件的 html 显示不正确？
【发布时间】：2019-12-15 01:02:23
【问题描述】：

我尝试将网页的顶部栏分离到另一个 HTML 文件中。我能够使用 jQuery 'load' 函数将 HTML 文件加载到主网页中的 div 中，但问题是它没有正确显示。当我将所有代码放在同一个 HTML 文件中时，它看起来和我预期的一样。我制作了一个 div 以拥有calc(100% - N px)，它在主 HTML 中正确显示。但是从单独文件加载的 HTML 不适合 div 宽度，尽管我设置了正文样式width: 100%。它只是在 div 中看起来像一个小得多的框。目前，我没有看到我在代码上犯的任何错误。

HTML - index.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="jqueryjs.js"></script>
</head>
<body>
...
    <div class = "TopBar" id = "TopBar"></div>
...
</body>
</html>

HTML - topbar.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body style = "margin: 0px; height: 54px; width: 100%; background-color: #dddddd;">
        <span class="helper"></span><h2>Drive</h2>
        <button class="TopBarBtn"><img src="assets/icon_sort.png"> Name </button>
        <button class="TopBarBtn"><img src="assets/icon_newFolder.png"> New Folder </button>
    </body>
</html>

CSS

.TopBar{
    position: fixed;
    width: calc(100% - 251px);
    height: 54px;
    top: 138px;
    left: 251px;
    z-index: 5;
    border-style: none;
    background-color: #eeeeee;
    overflow: hidden;
}

jQuery

$(document).ready(function(){
    $("#TopBar").load('topbar.html');
});

【问题讨论】：

不要在 topbar.html 中使用、、、等，因为您已经在 index.html 中加载了它，全部加载到 index.html 中。 html
你的背景颜色太长了；你有六个 e 和一个 s；十六进制颜色的最大值为七个字符。

标签： jquery html css

【解决方案1】：

如果你check the jQuery documentation你会发现以下信息：

.load() 方法与 $.get() 不同，它允许我们指定一部分要插入的远程文档。这是通过特殊的 url 参数的语法。如果一个或多个空格字符包含在字符串中，字符串中第一个之后的部分 space 被假定为决定内容的 jQuery 选择器正在加载。

文档接着解释：

jQuery 使用浏览器的 .innerHTML 属性来解析检索到的文档并将其插入到当前文档中。在这个过程中，浏览器通常会过滤文档中的元素，例如，，或元素。结果，检索到的元素 .load() 可能与检索到的文档不完全相同直接通过浏览器。

因此，首先，您需要在具有 ID 的元素中包含要从 topbar.html 中呈现的元素，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body style = "margin: 0px; height: 54px; width: 100%; background-color: #dddddd;">
      <div id="topbarContainer">
        <span class="helper"></span><h2>Drive</h2>
        <button class="TopBarBtn"><img src="assets/icon_sort.png"> Name </button>
        <button class="TopBarBtn"><img src="assets/icon_newFolder.png"> New Folder </button>
      </div>
    </body>
</html>

以下示例取自我之前引用的文档：

$( "#result" ).load( "ajax/test.html #container" );

您可以像这样修改此示例以适合您的 jQuery：

$(document).ready(function(){
    $("#TopBar").load('topbar.html #topbarContainer');
    $("#TopBar").children().css("width", "100%");
});

然后，您的 HTML 应该呈现如下：

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="jqueryjs.js"></script>
</head>
<body>
...
    <div class = "TopBar" id = "TopBar">
      <div id="topbarContainer">
        <span class="helper"></span><h2>Drive</h2>
        <button class="TopBarBtn"><img src="assets/icon_sort.png"> Name </button>
        <button class="TopBarBtn"><img src="assets/icon_newFolder.png"> New Folder </button>
      </div>
    </div>
...
</body>
</html>

您可能仍需要修改 CSS 样式以补偿此处的更改。您为 .helper 和 .TopBarBtn 类分配了哪些样式？

如果load() 函数不是问题，正如您在另一个答案中的评论中提到的那样，那么这可能只是您的 CSS 的问题。

如果问题仍然存在，请包含呈现的 HTML 的副本（可以从您的网络浏览器的代码检查器中复制和粘贴）和您的 CSS 的其余部分，以便正确调试。

【讨论】：

非常感谢。您的评论帮助我解决了问题。问题是当在“index.html”中加载“topbar.html”时，它将#topbarContainer 的宽度设置为不是“index.html”中#TopBar 元素的100%。我认为按照执行功能的顺序，它首先设置#topbarContainer 的宽度而不是引用#TopBar 的属性并加载容器。所以我可以通过在加载函数之后添加新函数来修复它，如下所示： $(document).ready(function(){ $("#TopBar").children().css("width", "100%") ; });
但我仍然不确定这是解决问题的最佳方法。例如，我似乎必须放置另一个函数来调整#topbarContainer 的宽度随着窗口宽度的变化。
@JaeeulBae 我已经更新了我的答案，以包含您在 cmets 中提到的解决方案。您无需等待文档准备好两次。如图所示，您应该可以直接在.load() 函数下方编写它。
如果这不起作用，那么您可能需要回调。让我知道，我会写一个小提琴来检查一下。

【解决方案2】：

您正试图在另一个 html 页面中加载完整的 html 模板。我建议您在这种情况下使用 iframe。但是如果你想加载topbar 的内容，我还是建议你修改下面的代码。

<div style = "margin: 0px; height: 54px; width: 100%; background-color: #dddddd;">
<span class="helper"></span><h2>Drive</h2>
<button class="TopBarBtn"><img src="assets/icon_sort.png"> Name </button>
<button class="TopBarBtn"><img src="assets/icon_newFolder.png"> New Folder </button>
</div>

并从 topbar.html 文件中删除所有 html 和 body 标签。

【讨论】：

感谢您的评论。我只是想在这个例子中不使用 iframe。我已经尝试删除 topbar.html 文件中的所有 html 和 body 标签，但它仍然没有按我的预期工作。代码中是否还有错误？