Question

我有一个html页面，其中包含在另一页面上实现的标题。在加载时，通过javascript代码，带有标题代码的html页面包含在我的主页面上。

示例：

main.html中：

<html>
<head>
</head>
<script>
    $(function(){
        $("#header").load("header.html");
        //$("#footer").load("footer.html");
    });
</script>
<body>
<div id='header'></div>

...

</body>
</html>

现在我有另一个html页面 - Header.html - 我定义了导航栏。

 <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

<body>
    <nav class="navbar barra_superior">
    ...
    </nav>

但是，使用此解决方案，header.html上的元标记也会应用于main.html。我的问题是，我是否只能在header.html上应用元标记。

由于

Answer 1

.load()允许您加载页面片段：

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

所以像这样使用它：

$("#header").load("header.html nav.navbar.barra_superior");

当此方法执行时，它会检索header.html的内容，但随后jQuery会解析返回的文档，以查找navbar和barra_superior类的nav元素。此元素及其内容将插入具有标头ID的元素中，并且将丢弃检索到的文档的其余部分。因此，不会插入Header.html中的<meta>元素。如果要从Header.html插入多个导航栏，则可以改为指定body元素。

包含在html页面上

1 个答案: