# 如何在html中引入js

在一些比较个性化的应用开发场景中,可能开发者会直接在应用中编写html文件,而html文件中通常需要引入一些js文件。

# 引入html页面所在的路径下的js

假设应用demo.app中有如下文件:

  1. 1.html
  2. 1.ts
  3. 1.js - 1.ts的编译结果

那么可以用如下的方法在1.htmlrequire 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="{&quot;version&quot;:&quot;4.0.4&quot;,&quot;buildNumber&quot;:&quot;201909071702-63c852de-1081&quot;,&quot;isProductEnv&quot;: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条评论
评论