use yii\web\AssetBundle
/**
* @author chan [email protected]>
* @since 2.0
*/
class AppAsset extends AssetBundle
{
public $basePath = '@webroot'
public $baseUrl = '@web'
//全局CSS
public $css = [
'css/animate.css',
'css/style.min.css',
]
//全局JS
public $js = [
'js/jquery-2.1.1.js'
]
//依赖关系
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
]
//定义按需加载JS方法，注意加载顺序在最后
public static function addScript($view, $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className(), 'depends' =>'api\assets\AppAsset'])
}
//定义按需加载css方法，注意加载顺序在最后
public static function addCss($view, $cssfile) {
$view->registerCssFile($cssfile, [AppAsset::className(), 'depends' =>'api\assets\AppAsset'])
}
}
1、把js的代码放在body里面，最好是放在页面最后的位置，而不是放在head里面。这样整个页面加载结束的时候才会加载到js。2、你可以使用js函数动态的修改页面，加载js。下面附上两个函数，可以用来加载js或者css。
/*Title : 包含其它 js 文件。
* Description : 将其它 Js 文件引入本文件中，方便管理、维护。*/
function include_js(path) {
var sobj = document.createElement('script')
sobj.type = "text/javascript"
sobj.src = path
var headobj = document.getElementsByTagName('head')[0]
headobj.appendChild(sobj)
}
/* Title : 包含其它 css 文件。
* Description : 将其它 css 文件引入本文件中，方便管理、维护。 */
function include_css(path) {
var fileref = document.createElement("link")
fileref.rel = "stylesheet"
fileref.type = "text/css"
fileref.href = path
}
3、利用ajax加载js。
项目中需要用到动态加载CSS 文件，整理了一下，顺便融合了动态加载JS 的功能写成了一个对象，先上代码：var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !')
}
var head = document.getElementsByTagName('head')[0]
var link = document.createElement('link')
link.href = path
link.rel = 'stylesheet'
link.type = 'text/css'
head.appendChild(link)
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !')
}
var head = document.getElementsByTagName('head')[0]
var script = document.createElement('script')
script.src = path
script.type = 'text/javascript'
head.appendChild(script)
}
}
对象包含两个完全独立的方法，分别用来加载CSS 文件和JS 文件，参数均为欲加载的文件路径。原理非常的简单：对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到head 标签里面。经测试，本方法兼容各浏览器，安全、无毒、环保，是 web 开发人员工作常备代码。
下面是调用代码，异常简单：
//动态加载 CSS 文件
dynamicLoading.css("test.css")
//动态加载 JS 文件
dynamicLoading.js("test.js")
