# 如何在html中引入js
在一些比较个性化的应用开发场景中,可能开发者会直接在应用中编写html文件,而html文件中通常需要引入一些js文件。
# 引入html页面所在的路径下的js
假设应用demo.app
中有如下文件:
1.html
1.ts
1.js
-1.ts
的编译结果
那么可以用如下的方法在1.html
中require
1.js
:
<script type="text/javascript">
require(['sys/sys'], function(sys){
sys.ready("./1").then(function(js1) {
js1.func1();
})
});
</script>
如果把1.html
改名为index.html
,那么我们可以通过 http://localhost:8080/demo
直接访问索引文件index.html
,此时需要使用下面的方法引入js:
<script type="text/javascript">
var pathname = location.pathname;
require(['sys/sys'], function(sys){
sys.ready(pathname + '/1.js').then(function(js1) {
js1.func1();
})
});
</script>
# 引入系统js模块
应用中的html在发送给前端时,服务器会自动在html中注入系统通用的css和js,发送给浏览器的html大致如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="succ-context-path" sz-template="html" content="">
<meta name="succ-product-info" sz-template="html" content="{"version":"4.0.4","buildNumber":"201909071702-63c852de-1081","isProductEnv":false}">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no">
<link rel="stylesheet" sz-template="html" href="/dist/sys/sys-all.css" type="text/css">
<link rel="stylesheet" sz-template="html" href="/dist/commons/icons.css" type="text/css">
</head>
<body>
具体的html body内容
<script type="text/javascript" src="/dist/sys/sys-all.js" sz-template="html"></script>
<script sz-template="html">
//你的脚本
</script>
</body>
</html>
如果想引入系统其它模块,可以直接在html中使用js引入,如:
<script type="text/javascript">
var pathname = location.pathname;
require(['sys/sys'], function(sys){
sys.ready([pathname + '/1.js', 'common/tree']).then(function(modules) {
modules[0].func1();
new modules[1].Tree(...);
})
});
</script>
0条评论
评论