欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
将html代码封装成js干嘛呢？直接写在html页面不好吗？首先我来为大家解答这个疑惑，也许有一天会有小伙伴和我遇到同样的问题。
如何将html代码封装（转换）成JS实现调用？
我管理的网站是用织梦搭建的后台，但是我需要在全站（包含所有文章页和列表页、栏目页）添加一张banner图（此处知识举个栗子），如果我直接写在模板里面，必然要更新所有栏目及其子页面模板，想一想一个网站有多少栏目，多少模板？是不是我每次更新banner图都需要去每一个模板修改呢？这样的话会大大降低我们的效率，所以将此处banner图的html代码封装成JS就很有必要了，以后修改banner图，仅需修改封装了banner图html代码的JS文件即可！
是吧，看到这里是不是已经明白了为什么要将将html代码封装成js了，下面飒飒来具体讲解一下将html代码封装（转换）成JS的具体步骤：
步骤一：打开Dreamweaver或者类似软件，事先写好需要封装的HTML代码。
步骤二：打开站长工具里面的HTML/JS转换页面，将需要封装的HTML代码转换成JS代码，如下图：
如何将html代码封装（转换）成JS实现调用？步骤三：在Dreamweaver中新建一个JS文件，将转换后的JS代码复制粘贴进去，保存为banner.js文件。
步骤四：在网站服务器中上载banner.js文件，记住上传的路径。
步骤五：进入网站后台，在需要添加banner图的模板中适当位置加入JS封装代码。代码如下：
&script src=&banner.js& type=&text/javascript&&&/script&
完成以上步骤，刷新后台栏目，即可实现banner图的调用，是不是完美解决了banner图的调用问题呢？以后修改banner图的时候，只需要修改banner.js文件即可。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials
&最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 12:27
原创：本文www.divcss5.com DIVCSS5版权所有。 DIVCSS5.com 学习与资源分享平台如何将JavaScript代码从HTML文件中分离出来_百度知道
如何将JavaScript代码从HTML文件中分离出来
&html& &head& &title&三种常用的对话框&/title& &script type=&text/javascript&& function alertDialog(){ alert(&您成功实行了这个操作&); } function confirmDialog(){ if(window.confirm(&您确认要进行这个操作吗？&)) alert(&您选择了确定！&); else al...
我有更好的答案
将JavaScript代码从HTML文件中分离出来，我们只是需要将JS的代码都统一写在一个文件中，然后我们在通过window.onload的事件，这个就是html先加载完成，然后才会调用JS文件，这里还是通过代码来体现：
html中：&html&
&head&&/head&
&script type=&text/javascript& src=&waterfall1.js&&&/script&
&script type=&text/javascript& src=&jquery.js&&&/script&
JS文件中：
window.onload = function(){
alert('我是JS文件代码');
采纳率：87%
function alertDialog(){ alert(&您成功实行了这个操作&); } function confirmDialog(){ if(window.confirm(&您确认要进行这个操作吗？&)) alert(&您选择了确定！&); else alert(&您选择了取消&); } function promptDialog(){ var input=window.prompt(&请输入内容：&); if(input!=null) { window.alert(&您输入的内容为&+input); }
将上面这些保存成“.js”文件，例如：temp.js，然后在要是用js的HTMl页面中加如下代码： &script type=&text/javascript& src=&temp.js&&&/script&
本回答被提问者采纳
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。当前位置：
js代码写在HTML正常，分离成js文件再在HTML中引用不起作用
js代码写在HTML正常，分离成js文件再在HTML中引用不起作用(1/2)
来源：网络整理&&&&&时间: 0:31:36&&&&&关键词:
关于网友提出的“ js代码写在HTML正常，分离成js文件再在HTML中引用不起作用
”问题疑问，本网通过在网上对“ js代码写在HTML正常，分离成js文件再在HTML中引用不起作用
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题： js代码写在HTML正常，分离成js文件再在HTML中引用不起作用
描述:js代码写在HTML功能正常，分离成js文件再在HTML中引用却不起作用js代码片段，功能是调用高德地图JS API，并做些布局调整var map = new AMap.Map("container", {
resizeEnable: true,
zoomEnable: true,
center: [116..90923],
});js写在html页面正常的全部代码&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" c c href="http://cache.amap.com/lbs/static/main1119.css" /&
&link rel="stylesheet" href="http://cache.amap.com/lbs/static/jquery.range.css" /&
&script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"&&/script&
&script src="http://cache.amap.com/lbs/static/es5.min.js"&&/script&
&script src="http://webapi.amap.com/maps?v=1.3&key=e9b08cbf29e4dc01af20a4f6a0299a62&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"&&/script&
&script src="http://cache.amap.com/lbs/static/jquery.range.js"&&/script&
.control-panel {
.control-entry {
width: 280
background-color: rgba(119, 136, 153, 0.8);
font-family: fantasy, sans-
text-align:
padding: 10
margin-bottom: 10
.control-input {
margin-left: 120
.control-input input[type="text"] {
width: 160
.control-panel label {
width: 120
#transfer-panel {
background-color:
max-height: 80%;
overflow-y:
width: 250
&div&&/div&
&label&选择工作地点：&/label&
&input type="text"&
&label&选择通勤方式：&/label&
&input type="radio" name="vehicle" value="SUBWAY,BUS"
checked/& 公交+地铁
&input type="radio" name="vehicle" value="SUBWAY"
&label&导入房源文件：&/label&
&input type="file" name="file"
&div&&/div&
***这是js代码片段***
var map = new AMap.Map("container", {
resizeEnable: true,
zoomEnable: true,
center: [116..90923],
&/html&js分离成文件被HTML引用的出现问题的全部代码&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&meta http-equiv="X-UA_Compatible" c c href="http://cache.amap.com/lbs/static/main1119.css" /&
&link rel="stylesheet" href="http://cache.amap.com/lbs/static/jquery.range.css" /&
&link rel="stylesheet" href="index.css" /&
&script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"&&/script&
&script src="http://cache.amap.com/lbs/static/es5.min.js"&&/script&
&script src="http://webapi.amap.com/maps?v=1.3&key=e9b08cbf29e4dc01af20a4f6a0299a62&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"&&/script&
&script src="http://cache.amap.com/lbs/static/jquery.range.js"&&/script&
***引用js文件代码***
&script src="rent_room/index.js"&&/script&
&div&&/div&
&label&选择工作地点：&/label&
&input type="text"&
&label&选择通勤方式：&/label&
&input type="radio" name="vehicle" value="SUBWAY,BUS"
checked/& 公交+地铁
&input type="radio" name="vehicle" value="SUBWAY"
&label&导入房源文件：&/label&
&input type="file" name="file"
&div&&/div&
&/html&高德API没有调用成功解决方案1:楼主把页面中的js代码变成文件之后，也要放在页面底部和之前相同的位置的解决方案2:因为按顺序是从上到下加载元素，调用高德api时的那个var map = new AMap.Map("container",{})
其中的 container 是个元素id吧？界面在未加载完之前就使用id，当然不可能取到。所以现在一般都把js放在body最后几行，你F12打开这个网站看看源码部分解决方案3:要等地图api回调成功在试试解决方案4:调用js脚本放在底部解决方案5:最近好多这种问题啊之所以空白，是因为浏览器读完了你的js代码，但&script&标签下面的body都没读到。里面的dom结构也没有构建起来，不管是jq还是高德地图的参数还是简简单单的document.getElementById('container')都不会找到任何结果你可以试试：
上一篇： 下一篇：豆丁微信公众号
君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
把这个html中的js代码分离成.js文件
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口&&&&&&&&&&&&&&&&&&
posts - 15,comments - 14,trackbacks - 0
一、JavaScript脚本语言的特性&&&&JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性：1、在客户端执行。完全在用户的计算机上运行，无须经过服务器。2、面向对象。具有内置对象，也可以直接操作浏览器对象。3、动态变化。可以对用户的输入作出反应，也可以直接对用户输出。4、简单易用。JavaScript脚本语言虽然简单，但初学者也能快速掌握。5、只能与HTML语言一起使用。要通过浏览器解释执行。二、如何在HTML中加入JavaScript脚本&&JavaScript采用的格式如下：&Script Language="JavaScript"&JavaScript 语句 &/Script&把上述语句放在HTML的&head&与&/head&之间，也可放在&body&与&/body&之间。例子：在网页上显示“你好！”。&html&&body&&Script Language="JavaScript"&alert("你好！") &/script&&/body&&/html&三、在浏览器地址栏直接执行JavaScript脚本也可以在浏览器的地址栏中输入JavaScript语句，由浏览器直接执行。如输入：javascript:alert(200*75)四、调用JavaScript文件 可以将纯JavaScript的语句另外保存在一个"*.js"的文件中，需要时再调用。例子：调用test.js文件，显示提示。 &html&&body&调用test.js文件&script language="JavaScript" src="test.js"&&/script&&/body&&/html& test.js的文件内容如下： alert("这是被调用的语句。") 五、注释语句用&!- ... -&表示注解部分，用作说明解释，浏览器不显示出来。不要也可以。另外，双斜线 "//" ，是JavaScript 的注释语句，它后面的语句不被执行。六、变量的使用变量的声明：Var usename变量的赋值：usename="李国强"例子：在网页上显示“李国强你好！”。&html&&body&&Script Language="JavaScript"&Var usenameusename="李国强"alert(usename + "你好！") &/script&&/body&&/html&七、数组数组的定义：var name=new Array(5) 用 new 来生成数组。数组的赋值：name[1]="Marry"数组的初始化：var name=new Array("Marry","Petty","Mike","Jphn")数组的引用：name[1]注：数组的第一个素由1开始。八、运算符与表达式1、代数运算符：加（+）、减（-）、乘（*）、除（/）、取余（%）。2、比较运算符：等于（==）、不等于（!=）、大于（&）、小于（&）、大于等于（&=）、小于等于（&=）。3、逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）。表达式：由变量和运算符组成的式子。如：usename + "你好！"
阅读(...) 评论()}