html页面代码重用-document writeln

Table of Contents

需求

通过 JavaScript 来实现

第一步：制作html文件

第二步：转成js文件

第三步：到你的页面文件中加载这个js文件

需求

几个页面需要的头部和底部的内容往往是一样的，这就希望可以只写一段代码作为模板，然后再几个页面中都加载这这个模板。另外，如果需要修改，也只要修改模板就好，所有页面都同时都是新的样式了。

通过 JavaScript 来实现

能实现上面需求的方法还是不少的，这个比较简单一点，几乎不需要学习的额外知识，只通过2句基本的js语句就能实现。一句写页面html，一句加载js文件执行。暂时先用了这个方法。

第一步：制作html文件

把你的代码正常写成一个html文件，比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="background: black;height: 36px;line-height: 36px;color: #9f9f9f;"><div style="width: 1000px;margin: auto;"><span>欢迎光临，请<a href="login.html" style="text-decoration: none;color: red;">登录 </a>或者<a href="regist.html" style="text-decoration: none;color: red;">注册</a></span><ul style="float: right;list-style-type: none;margin: 0"><li style="float: left;margin: 0 5px;padding: 0 10px;"><a href="cart.html" style="text-decoration: none;color: red;">购物车</a></li><li style="float: left;margin: 0 5px;padding: 0 10px;">我的订单</li><li style="float: left;margin: 0 5px;padding: 0 10px;">客户服务</li></ul></div>
</div>
</body>
</html>

第二步：转成js文件

就是把上面的每一行，都用 document.writeln(" ") 包起来。把你的html的内容都写在括号里。例外注意引号需要用 \" 转义。这个工作写个简单的脚本就能完成、不过也有现成的在线工具：http://tool.chinaz.com/Tools/Html_Js.aspx

最后你的js文件是这样的，这里我只需要body内的部分：


document.writeln("<div style=\'background: black;height: 36px;line-height: 36px;color: #9f9f9f;\'>");
document.writeln("    <div style=\'width: 1000px;margin: auto;\'>");
document.writeln("        <span>");
document.writeln("            欢迎光临，请");
document.writeln("            <a href=\'login.html\' style=\'text-decoration: none;color: red;\'>登录 </a>");
document.writeln("            或者");
document.writeln("            <a href=\'regist.html\' style=\'text-decoration: none;color: red;\'>注册</a>");
document.writeln("        </span>");
document.writeln("        <ul style=\'float: right;list-style-type: none;margin: 0\'>");
document.writeln("            <li style=\'float: left;margin: 0 5px;padding: 0 10px;\'>");
document.writeln("                <a href=\'cart.html\' style=\'text-decoration: none;color: red;\'>购物车</a>");
document.writeln("            </li>");
document.writeln("            <li style=\'float: left;margin: 0 5px;padding: 0 10px;\'>我的订单</li>");
document.writeln("            <li style=\'float: left;margin: 0 5px;padding: 0 10px;\'>客户服务</li>");
document.writeln("        </ul>");
document.writeln("    </div>");
document.writeln("</div>");

第三步：到你的页面文件中加载这个js文件

把这句放在你的body的第一行，这样的的头部内容就有了：

<script src="page/pg-top.js"></script>

---------------------
作者：qq_34787830
来源：CSDN
原文：https://blog.csdn.net/qq_34787830/article/details/79781894
版权声明：本文为博主原创文章，转载请附上博文链接！

html页面代码重用-document writeln相关推荐

[网络收集]JS刷新页面总和！多种JS刷新页面代码!
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
多种JS刷新页面代码!
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
JS刷新页面总和！多种JS刷新页面代码!
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
各种页面刷新代码大全,asp/javascript刷新页面代码
页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面. 1) 10表示间隔10秒刷新一次 2) <script> window.location.re ...
php可以支持代码重用技术的命令,Linux下的编程 PHP高级技巧全放送(一)
全球超过300万个互联网网站的管理员都在使用,使得它成为最为普及的端脚本语言之一.其特点是运行速度快.稳定可靠.跨平台,而且是开放源软件. 随你使用的水平不同,PHP可以很简单,也可以很复杂,可以只使 ...
asp+ajax菜单,AJAX_基于asp+ajax和数据库驱动的二级联动菜单，index.asp 页面代码复制代码代 - phpStudy...
基于asp+ajax和数据库驱动的二级联动菜单 index.asp 页面代码复制代码代码如下: set cmd = conn.execute("select bigclassid,big ...
代码重用_WebAssembly的速度和代码重用
代码重用想象一下,将用高级语言编写的非Web应用程序转换为可用于Web的二进制模块. 无需对非Web应用程序的源代码进行任何更改,即可完成此转换. 浏览器可以有效地下载新翻译的模块,并在沙箱中执行该 ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
html返回首页页面代码,后台返回的HTML整个页面代码打开方法
后台返回的html代码片段,需要插入html标签中,而返回的整个html文档,则需要重写整个页面. 解决方法: 需要一个中转页面,用document.write()方法重写整个页面: // POST任 ...

html页面代码重用-document writeln

需求

通过 JavaScript 来实现

第一步：制作html文件

第二步：转成js文件

第三步：到你的页面文件中加载这个js文件

html页面代码重用-document writeln相关推荐

最新文章

热门文章