Question

我试图在多个地方和页面中使用相同的HTML块，同时保持少量的代码行和低冗余。

基本上，我需要的东西类似于一个函数，当它被调用时，它只会将HTML代码加载到页面中 - 这将在页面加载时完成，因此不需要点击或其他需要的操作触发它。

我不想使用PHP include。

示例：

＆＃13;

<div class="x">
   <div class="y">
      <div class="z"></div>
   </div>
</div>

＆＃13;

我需要在100多个页面中使用相同的X类，它将具有相同的内容。

只插入X类和自动添加内部内容的最佳方法是什么？

Answer 1

您可以将代码放在不同的.html文件中，然后使用.load() http://api.jquery.com/load/

加载

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

<强> main.html中

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
        <sript src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
             $(function(){
                  $('#commonsection').load('reusablefile.htm');

                  // which is eqvivalent to:
                  //
                  // $.ajax({
                  //     url: 'reusablefile.htm',
                  //     dataType: 'html',
                  //     success: function(data){
                  //         $('#commonsection').html(data);
                  //     }
                  // });
             });
        </script>
     </head>
     <body>
         <div id="commonsection"></div>
     </body>
</html>

<强> reusablefile.html：

<script>
    (function($){ //separate scope to keep everything "private" for each module
        //do additional javascript if required
    })(jQuery);
</script>
<p>...Some non-trivial content...</p>

Answer 2

如果您正在使用任何javascript框架，他们通常也有一个选项。

AngularJS使用指令来处理重复的html代码。 https://docs.angularjs.org/guide/directive

也可能重复以下问题： How to reuse the html code in every html page?

Answer 3

如果您不介意使用脏话，请尝试此操作。：）

<强> $（ “reuseTarget。 ”）的HTML。（$（）文本（）“ ×”。）;

$(".reuseTarget").html($(".x").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="x">
   <div class="y">
      <div class="z">aabb</div>
   </div>
</div>

<div class="reuseTarget">
  </div>

如何使用javascript函数重用HTML代码块？

3 个答案: