模拟PHP包括没有PHP

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

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

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

1）拥有所有的内容存在一个页面上，然后确定要显示基于附加到网址的关键字，其内容：

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

2）包括有写出来的菜单，并调用函数中的每个页面

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

与选项1功能的JavaScript文件，更新过程将包括Ø F中的一个页面

有了第2个选项编辑一个导航菜单，更新就意味着在JavaScript文件改变功能

我与选项1关注的是，该网页将要加载的内容很多，它不需要显示。我对选项2的担忧可能看起来微不足道，但这是代码可能会变得混乱。

有没有任何理由这样做会比其他方式更好？还是有第三个优越的选择，我错过了？

来源

2012-08-16 dougmacklin

您可能没有在服务器上支持PHP。但是，您可以在本地计算机上创建自己的网站，然后根据需要生成完整页面（构建系统）。有时候这是一个可行的选择。 – hakre 2012-08-16 18:59:04

+1 @hakra，这是一个非常聪明的工作。 – 2012-08-16 20:46:23

您有几种选择，每个都有自己的优点和缺点：

服务器端包含或SSI。如果你没有PHP，那么你很有可能没有SSI，而这个选项需要对你的.htaccess文件进行一些令人讨厌的分析。检查Dominic P.对SSI写作的回答。 SSI优于JavaScript或Frames的好处是它不需要用户启用JS（很多用户不需要），也不会出现任何导航困难。
框架。您可以使用standard frames将导航置于其自己的单独文件中，并且使用正确的样式可以实现无缝。您也可以使用iframe将您的导航放置在网站的任意部分，例如边栏或其他内容。帧，特别是标准帧的缺点是它们倾向于制作书签，链接和前进/后退按钮的行为奇怪。好处是，框架不需要浏览器合规性或服务器支持。
JavaScript。您可以参考任何其他解答，以获得JS解决方案的出色解释，特别是在您使用jQuery时。但是，如果您的网站没有足够的动态性，以至于您的用户希望启用JavaScript，则这意味着大量的观看者根本看不到菜单 - 确实很糟糕。

来源

2012-08-16 19:10:02

结束了与框架一起SSI不是一个选项。 JavaScript的load（）方法的工作，但需要很长的时间才能完成 – dougmacklin 2012-08-20 18:10:27

我建议坚持与框架，因为你已经做了，但如果JS负载（）需要那么久有可能是其他事情正在进行。 FWIW，iFrame可能会比导航的标准框架更好。对不起，您的托管是如此限制！ – 2012-08-20 22:48:10

服务器端包括：http://www.freewebmasterhelp.com/tutorials/ssi/

来源

2012-08-16 18:56:53 ChrisW

感谢这个教程，我会研究我的服务器是否支持这些 – dougmacklin 2012-08-16 19:10:39

是使用.load jQuery的AJAX功能

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

这样，你的代码保持干净，你可以编辑包括单独的HTML文件只是像PHP一样。

来源

2012-08-16 18:57:02

谢谢你的回答，标记为@ user190284's，因为我认为这对于那些不熟悉jQuery – dougmacklin 2012-08-16 19:12:29

结账Server Side Includes。我对他们没有太多的经验，但从我记得的角度来看，他们的设计是解决您的问题。

来源

2012-08-16 18:57:12

你应该考虑AJAX来完成这项任务。包含像jQuery这样的第三方库，并在占位符内加载单独的HTML文件，并通过ID将它们作为目标。

例如，在主HTML页面：

<div id="mymenu"></div>

此外，在主HTML，但在头部分：

$('#mymenu').load('navigation.html');

但你最好的选择将切换到主机支持PHP或任何其他服务器端包含。这会让你的生活变得更轻松。

来源

2012-08-16 19:00:06

的人来说更有帮助测试，这种方法的工作原理，但需要很长时间，平均速度超过两秒，直到导航出现。我的服务器似乎一般处理速度都很慢，所以我建议未来的用户自己试一试 – dougmacklin 2012-08-20 18:12:29

加载时间完全取决于您的服务器和客户端的连接速度。使用JavaScript引擎（在这种情况下，它的jQuery扩展）在几毫秒内解析接收到的数据本身。 – 2012-09-11 14:45:08

您可以使用HTML进口http://w3c.github.io/webcomponents/spec/imports/

这里是http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html一个例子包含

<div class="warning"> 
    <style scoped> 
     h3 { 
     color: red; 
     } 
    </style> 
    <h3>Warning!</h3> 
    <p>This page is under construction</p> 
    </div> 

    <div class="outdated"> 
    <h3>Heads up!</h3> 
    <p>This content may be out of date</p> 
    </div>

然后index.html可能包含

<head> 
    <link rel="import" href="warnings.html"> 
</head> 
<body> 
    ... 
    <script> 
    var link = document.querySelector('link[rel="import"]'); 
    var content = link.import; 

    // Grab DOM from warning.html's document. 
    var el = content.querySelector('.warning'); 

    document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body>

来源

2015-11-13 17:12:37

模拟PHP包括没有PHP

回答

相关问题