在没有PHP的情况下模拟PHP包含

Question

我想在多个页面上包含相同的导航菜单,但是我没有PHP支持,也不能以任何其他方式影响我的服务器.

我想避免简单地将html复制并粘贴到所有页面上,因为这会使菜单更新变得很痛苦.

我能想到的两个选项如下:

1)在一个页面上存在所有内容,然后根据附加到网址的关键字确定要显示的内容:

example.com/index?home
example.com/index?news

2)包含一个javascript文件,该文件具有将菜单写出并在每个页面上调用该函数的功能

function setupMenu() {
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}

使用选项1,更新过程包括在一页上编辑一个导航菜单

使用选项2,更新意味着更改javascript文件中的功能

我对选项1的关注是页面必须加载很多不需要显示的内容.我对选项2的关注可能看似微不足道,但是代码可能会变得混乱.

是否有任何理由这样做会比另一种更好？或者我缺少第三个优越的选择？

Answer 1

是的，使用 .load jQuery ajax 函数

$('#result').load('ajax/menu.html');

这样您的代码就可以保持干净，并且您可以像 PHP 一样编辑单独的 HTML 文件中的包含内容。

Answer 2

您有几个选项,每个选项都有自己的优点和缺点:

• 服务器端包含或SSI.如果您没有PHP,那么很可能您没有SSI,并且此选项需要使用.htaccess文件进行一些令人恼火的麻烦.检查Dominic P.的SSI写作答案.SSI优于JavaScript或Frames的好处是它不需要用户启用JS - 很多用户都没有 - 并且它也不会出现任何导航困难.

• 帧.您可以使用标准框架将导航放在其自己的单独文件中,并使用正确的样式将其无缝化.您还可以使用iframe将导航放置在网站的任意部分,例如侧边栏或其他任何部分.帧的缺点,特别是标准帧,是它们倾向于使书签,链接和前进/后退按钮表现奇怪.从好的方面来说,框架不需要浏览器合规性或服务器支持.

• JavaScript的.您可以参考任何其他答案,以获得对JS解决方案的出色解释,特别是如果您使用的是jQuery.但是,如果您的网站没有足够的动态以至于您的用户希望启用JavaScript,那么这意味着您的大量观看者根本看不到菜单 - 糟糕,绝对.

-