html - html中的常用元素

Question

我正在开发一个项目，发现所有页面都有共同的元素，我想知道是否有任何方法可以一般定义这些元素并从您的html中调用它们以避免必须定义每个页面。非常感谢您的帮助

score 0 · Accepted Answer

我不知道用纯 HTML 完全做到这一点的任何方法，但是通过混合一个小的服务器端脚本，你可以。只是为了让您了解它的外观：

此示例使用 PHP。如果您在 Microsoft 服务器上，则需要将此示例转换为 .NET 或 .aspx。

首先，将以下内容保存到与其他页面位于同一文件夹中的名为“mytest.php”的文件中。（如果你愿意，你可以把它放在一个子文件夹中，但是对于这个例子，我会保持简单）。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

这个测试只有一行。有点没用，但你可以看到重点。

现在，在<head>您的 HTML 标记中，您可以执行此操作（我添加<head>标记只是为了让您可以看到它……您不会想要有两组<head>标记。）

<head>
    <?php include 'mytest.php'; ?>
</head>

现在，访问该页面并显示 HTML，您应该会看到该行已合并到您的 HTML 中。请注意，任何包含 PHP 代码（如上）的文档都必须以.php扩展名结尾。

score 0 · Accepted Answer

正如@loops 所建议的那样，我强烈推荐AngularJS进行救援。

这是一个用 JavaScript 构建的很棒的 MVC 框架，没有外部依赖项。

它提供了使用指令创建自定义元素的可能性

所以你可以创建一个新元素<mymenu></mymenu>，你可以给这个新标签一些行为以及绑定事件到它。

AngularJS 负责所有其余的工作，您的新标签将在您应用程序的所有页面中可用。

是的，你的想法是正确的，应该在客户端而不是服务器端完成。

一旦您首先了解了框架，我很高兴为您提供一个完整的工作示例。否则我认为一次会提供太多信息；）

score 0 · Accepted Answer

测试.html

<div>Menu</div>

当您需要此菜单时，只需在您的页面中调用此代码：

$('#result').load('ajax/test.html', function() {
   alert('Load was performed.');
});

另一种选择可能是AngularJS，或者只是 PHP 中包含的东西。

3 回答 3