多个HTML页面共同调用一段html代码的方法

方法一、使用script方法:

制作一个共用头部文件head.js或一个共用底部文件foot.js。如主页文件是mac.htm,调用头部或底部文件的方法是:在主页文件代码的开始位置和结束位置分别增加下面的代码:<script src=’head.js’>和<script src=’foot.js’>调用共同的网页头部或者网页底部,减少了每个页面都要编写头部或底部的复杂程度,而且方便修改,只要修改一个头部或者底部文件,所有页面的头部或者底部都随之改变,增加了工作效率。

导航条html实现代码如head.html:

1234567891011121314151617181920212223242526<!DOCTYPE html><html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link rel="stylesheet" type="text/css" href="../css/head.css"></head> <body><div class='miaov_head'><ul><li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li><li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li><li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li><li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li><li><a href="http://www.cnblogs.com/jtjds/">Music</a></li><li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li></ul></div></body> </html>

其css文件为head.css:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869* {margin: 0;padding: 0;} body {background: white;position: relative;height: 100%;color: #777;font-size: 13px;}  li {list-style: none;text-decoration: none;} .miaov_head {height: 36px;width: 100%;margin: 0 auto;background: black;margin-bottom: 0px;}  .miaov_head ul {float: left;width: 900px;height: 36px;margin-top: 0px;color: white;position: absolute;top: 0px;margin-left: 250px;} .miaov_head ul li {float: left;padding-left: 80px;margin-left: 0px;color: white;list-style: none;} .miaov_head ul li a {color: white;font-size: 14px;text-decoration: none;} .miaov_head input {position: absolute;top: 5px;margin-left: 1000px;width: 200px;height: 22px;} .miaov_head a {line-height: 36px;color: #777;} .miaov_head a:hover {color: #555;}

将以上HTML代码转换为JavaScript:

12345678910111213141516171819202122232425document.writeln("<!DOCTYPE html>");document.writeln("<html>");document.writeln("<head>");document.writeln("<meta charset=\"utf-8\">");document.writeln("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">");document.writeln("<title>Examples</title>");document.writeln("<meta name='description' content=\"\">");document.writeln("<meta name='keywords' content=\"\">");document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/head.css\">");document.writeln("</head>");document.writeln("<body >");document.writeln(" <div class=\'miaov_head\'>");document.writeln("    <ul>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">iPad</a></li>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Watch</a></li>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Music</a></li>");document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Contact Us</a></li>");document.writeln("    </ul>");document.writeln("</div>");document.writeln(" ");document.writeln("</body>");document.writeln("</html>");document.writeln("");

并保存在head.js中,保存之后当需要使用它的时候,可在头部调用js文件,例如在mac.html中调用head.js:

12345678910111213141516171819202122232425<!DOCTYPE html><html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><script type="text/javascript" src="../javascript/head.js"></script></head> <body><ul><li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li><li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li><li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li><li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li><li><a href="http://www.cnblogs.com/jtjds/">Music</a></li><li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li></ul></body> </html>

在浏览器中查看:

多个HTML页面共同调用一段html代码的方法

方法二、使用$(“selector”).load()

为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件

1234567891011121314//1.当前文件中要插入的地方使用此结构:<div class="include" file="***.html"></div> //2.***.html中放入内容,用html格式仅仅因为会有编辑器的书写辅助。。 //3.代码:$(".include").each(function() {if (!!$(this).attr("file")) {var $includeObj = $(this);$(this).load($(this).attr("file"), function(html) {$includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签})}});

或者在index文件里只写重复部分,剩下的一股脑放各自单独文件 load() 进来~

相比于第一种,个人更推荐第二种方法。

参考:jQuery – AJAX load() 方法

到此这篇关于多个HTML页面共同调用一段html代码的方法的文章就介绍到这了,更多相关HTML共同调用一段html代码内容请搜索kinponet浏览下面的相关文章,希望大家以后多多支持kinponet

原创文章,作者:Zhu, Yuanyuan,如若转载,请注明出处:https://www.yidc.net/archives/12210