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

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

HTML - 索引.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 - 顶栏.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');
});

如果您查看 jQuery 文档，您会发现以下信息：

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

然后，该文件继续解释：

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

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

<!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 的副本(可以从 Web 浏览器的代码检查器复制和粘贴(和 CSS 的其余部分，以便可以正确调试。

您正在尝试在另一个 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>

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

相关内容

最新更新

热门标签：