Simulate PHP Include Without PHP

2020-07-10 11:18发布

站内问答 / PHP
1787 6 5

I want to include the same navigation menu on multiple pages, however I do not have PHP support, nor can I affect my server in any other way.

I want to avoid simply copying and pasting the html onto all the pages as this would make updating the menu a pain.

The two options I can think of are as follows:

1) Have all the content exist on one page, then determine which content to show based on a keyword appended to the url:

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

2) Include a javascript file that has a function that writes the menu out and call the function on each page

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

With Option 1, the updating process would consist of editing one nav menu on the one page

With Option 2, updating would mean changing the function in the javascript file

My concern with Option 1 is that the page would have to load a lot of content that it wouldn't need to display. My concern for Option 2 may seem trivial but it is that the code can get messy.

Are there any reasons doing it one way would be better than the other? Or is there a third superior option that I'm missing?

6条回答
你好瞎i
2楼-- · 2020-07-10 11:42

Check out Server Side Includes. I don't have a whole lot of experience with them, but from what I recall, they are designed to be a solution to just your problem.

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2020-07-10 11:43

Yes use .load jQuery ajax function

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

That way your code stays clean, and you can just edit the includes in seperate HTML files just like PHP.

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
4楼-- · 2020-07-10 11:44

You have a few options, each with its own advantages and drawbacks:

  • Server Side Includes, or SSI. If you don't have PHP there's a good chance you don't have SSI either, and this option requires some irritating mucking-about with your .htaccess file. Check Dominic P.'s answer for a writeup of SSI. The benefit of SSI over JavaScript or Frames is that it doesn't require the user to have JS enabled - which a lot of users don't - and it also doesn't present any navigational difficulties.

  • Frames. You could either use standard frames to put the navigation in its own separate file, and with the correct styling it would be seamless. You could also use an iframe to place your navigation in an arbitrary part of the site, like a sidebar or whatever. The downside to frames, particularly standard frames, is that they tend to make bookmarking, links and the forward/back buttons behave oddly. On the upside, frames don't need browser compliance or server support.

  • JavaScript. You can refer to any of the other answers for excellent explanations of the JS solution, particularly if you're using jQuery. However, if your site isn't otherwise dynamic enough that your users will want to have JavaScript enabled, this will mean that a large number of your viewers will not see the menu at all - bad, definitely.

    • -
查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2020-07-10 11:49

You can use HTML Imports http://w3c.github.io/webcomponents/spec/imports/

Here is an example from http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html contains 

 <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>

Then index.html could contain

<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>
查看更多
0人赞 添加讨论(0) 举报
趁早两清
7楼-- · 2020-07-10 11:57

You should consider AJAX for this task. Include a third party library like jQuery and load the separate HTML files inside placeholders, targeting them by ID.

E.g, in your main HTML page:

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

Also, in your main HTML, but in the HEAD section:

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

But your best bet would be to switch to a hosting that supports PHP or any other server-side includes. This will make your life a lot easier.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)