如何使用javascript或jQuery处理多个HTML中的常见代码 [英] How to handle common code in multiple HTML's using javascript or jQuery

问题描述

我有一个拥有近30个html的应用程序，它们共享一些通用代码，我为此做出了任何需要在每个页面上更改的更改。以下是我在所有页面上使用的代码片段。

 < div> 
< ul> 
< li class =current>< a href =。html>< / a>< / li> 
< li>< a href =。html>< / a>< / li> 
< li>< a href =。html>< / a>< / li> 
< li>< a href =。html>< / a>< / li> 
< / ul> 
< / div> 
  

是否有任何解决方案可以将它保留在单个文件中，并在需要时重用它？

解决方案

有几种方法可以达到这个目的，以保持代码的可维护性。

PHP

---

当然首先想到的是如果您想使用PHP， include（） 的使用包括并评估您的外部文件或脚本中的代码。

您可以这样使用它：

 <？php include（'path / to / file.html'）; ？> 
  

注意！注意：您的容器文件必须是 .php 文件，以便从服务器评估此指令。您不需要做任何事情，只需更改文件扩展名即可实现。当然，请确保您的服务器可以解析PHP。

另外，请注意与 include_once（） ，我不会在这种情况下推荐。

SSI（服务器端包含）

---

如果你不想使用PHP，你可以使用 服务器端包含 < sup> [维基百科] 。 SSI看起来像一个HTML注释：

 <！ - ＃include virtual =your.html - > 
  

注意！您必须确保 mod_include 在Apache服务器中安装并启用，并且在 httpd.conf 或 .htaccess 文件中添加以下指令：

 选项+包括
  

阅读文档以上链接获取更多信息。

客户端包含

---

您的问题实际上指定在JS或jQuery中执行此操作。不确定它是否因为您不知道服务器端选项，或者您确实需要客户端选项。无论如何，也有一些客户端解决方案。

考虑到这种可能性，我会推荐服务器端解决方案来解决您的问题。

IFrame element

---

< iframe> 元素包含来自外部的内容文件放在页面的单独区域。您可以像这样使用它：

 < iframe src =your.htmlwidth =xheight =y >< p>后备文本< / p>< / iframe> 
  

对象元素

---

< object> 元素与< iframe> 类似，但后者被设计为更多 sandbox 一个应用程序，前者感觉更接近你的页面。用法如下：

 < object type =text / htmldata =your.html><<< ; /对象> 
  

Javascript插入

---

将代码转换为Javascript文件并指示文件将内容插入到DOM中。这是一个例子

external.js

  var element ='< div> 
< ul> 
< li class =current>< a href =。html>< / a>< / li> 
< li>< a href =。html>< / a>< / li> 
< li>< a href =。html>< / a>< / li> 
< li>< a href =。html>< / a>< / li> 
< / ul> 
< / div>'; 
  

container.html

 < script type =text / javascriptsrc =external.js>< / script> 
< script> 
 document.getElementById（'＃contains-element'）。innerHTML（element）; 
< / script> 
  

AJAX

---

jQuery可以帮助您轻松处理一些AJAX调用。您可以使用 jQuery.get（） 或 jQuery.load（） 。我建议你使用后者，因为 load（）将加载的元素直接注入到DOM中，还可以指定加载哪个部分，尤其是漂亮如果您想将所有包含内容存储在一个外部HTML文件中。

  jQuery（document）.ready（function（$） {
 $（'＃contains-element'）。load（'your.html'）; 
}）; 
  

I have an application which has almost 30 html's and they share some common code to which i f i made any changes i need to change it on every page. Below is the piece of code which i am using on all pages.

<div>
  <ul>
    <li class="current"><a href=".html" ></a></li>
    <li><a href=".html"></a></li>
    <li><a href=".html"></a></li>
    <li><a href=".html"></a></li>
  </ul>
 </div>

Is there any solution to which i can keep it on a single file and reuse it where ever i want?

解决方案

There are several ways you can achieve this inclusion to keep your code more maintainable.

PHP

---

Of course the first that comes to mind is if you want to use PHP is the usage of include() which includes and evaluates the code in your external file or script.

You can use it as such:

<?php include('path/to/file.html'); ?>

Note! Be careful: your container file must be a .php file in order for this directive to be evaluated from the server. You don't need to do anything but changing the file extension, for that to happen. And, of course, make sure that your server can parse PHP.

Also, beware of the difference with include_once(), which I would not recommend in this case.

SSI (Server side include)

---

If you don't want to use PHP, you can do that very simple and clean with a Server side include^[Wikipedia]. An SSI looks like an HTML comment:

<!--#include virtual="your.html" -->

Note! You will have to make sure to have mod_include installed and enabled in your Apache server, and to add the following directive either in your httpd.conf or .htaccess file:

Options +Includes

Read the doc link above for more information.

Client-side includes

---

Your question actually specifies to do this in JS or jQuery. Not sure if it does because you were not aware of the server-side options, or if you really wanted a client-side one. In any case, there are also some client-side solutions.

Given the possibility, I would recommend the server-side solutions to your problem.

IFrame element

---

The <iframe> element includes content from an external file in a separate area in your page. You can use it like so:

<iframe src="your.html" width="x" height="y"><p>Fallback text</p></iframe>

Object element

---

The <object> element does a similar thing to the <iframe>, but while the latter is designed more as a means to sandbox an application, the former feels more integrated in your page. The usage is as follows:

<object type="text/html" data="your.html"></object>

Javascript insertion

---

Convert the code into a Javascript file and instruct the file to insert the content into the DOM. Here is an example

external.js

var element = '<div>
                   <ul>
                     <li class="current"><a href=".html" ></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                   </ul>
               </div>';

container.html

<script type="text/javascript" src="external.js"></script>
<script>
     document.getElementById('#containing-element').innerHTML(element);
</script>

AJAX

---

jQuery can help you deal with some AJAX calls easily. You could use jQuery.get() or jQuery.load(). I would suggest you use the latter, as load() injects the loaded element directly into the DOM, and also as you can specify exactly which part to load, which is nifty especially if you would like to store all your includes in one external HTML file.

jQuery(document).ready(function ($){
    $('#containing-element').load('your.html');
});

这篇关于如何使用javascript或jQuery处理多个HTML中的常见代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！