用javascript加载html代码

debugcn 发表于 Dev

它的

body	{
  background-color: #E6E6E6;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-family: arial, helvetica, sans-serif;
  font-size: 22px;
  color: #808080;
}
p	{
  font-size: 22px;
  color: #808080;
}
h1	{
  font-size: 32px;
  font-weight: bold;
}
h2	{
  font-size: 22px;
  font-weight: bold;
}
h3	{
  font-size: 22px;
  font-weight: normal;
  text-decoration: underline;
}
hr	{
  border: 0;
  border-bottom: 1px dashed #808080;
}

a:link	{
  color: #B2AB19;
  text-decoration: none;
  border: none;
}
a:hover	{
  color: inherent;
  text-decoration: none;
  border-bottom: 1px solid #B2AB19;
}
a:active	{
  color: inherent;
  text-decoration: none;
  border: none;
}
a:visited	{
  color: #B2AB19;
  text-decoration: none;
  border: none;
}
#container {
  width: 90%;
  margin: 0 auto;
  background: #FFFFFF;
}
#nav	{
  clear: both;
  width: 100%;
  background-color: #EF9898;
  border: 0px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}
#header	{
  clear: both;
  width: 100%;
  background-color: #FFFFFF;
  border: 0px;
  margin: 0 auto;
  box-sizing: border-box;
}
#lcolumn	{
  float: left;
  max-width: 250px;
  border: 0px;
  padding: 10px;
  box-sizing: border-box;
}
#rcolumn	{
  position: relative;
  margin-left: 250px;
  border: 0px;
  padding: 10px;
  box-sizing: border-box;
}
#footer	{
  clear: both;
  width: 90%;
  background-color: #FFFFFF;
  border: 0px;
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

<script>
  function getheaderHTML()	{
    var content =  '  <div id="nav">'
    +'    <a href="index.html">number 1</a>｜<a href="students.html">number 2</a>'
    +'  </div>'
    +'  <div id="header">'
    +'    <img src="header.jpg" alt="testing" width=100% height=260>'
    +'  </div>';
    document.body.innerHTML = content;
  }
  function getfooterHTML()	{
    var content =  '  <div id="footer">'
    +'    &#169;2016'
    +'  </div>'
    document.body.innerHTML = content;
  }
</script>

<div id="container">
  <script>
    getheaderHTML();
  </script>
  <div id="lcolumn">
    <p>hello</p>
  </div>
  <div id="rcolumn">
    <h1>Title</h1>
    <p>hello</p>
  </div>
  <script language="JavaScript">
    getfooterHTML();
  </script>
</div>

我想使用javascript来避免重复代码来格式化多个网页的布局，因此当我更改布局时，只需要更改一个文件的内容即可。有人告诉我，document.write并不是执行此操作的好主意，并且一位成员很友好地提出了上述javascript代码。但是，它不会加载所需的结果。您能否提一些建议？非常感谢。

埃斯特万·塞万提斯（Esteban Cervantes）

我建议您使用一些模板引擎，例如Pug。借助pug，您可以轻松地重用代码，并使代码更具可读性和组织性。希望我的建议行之有效。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。