Yii2 加载 js 与 css 的方法

Yii2 中引入js、css的方法主要分为两种:

1、加载外部脚本或资源包:

yii\helpers\Html;
echo Html::jsFile();
echo Html::cssFile(); 

use yii\web\View;
$this->registerJsFile();
$this->registerCssFile(); 

2、注册脚本或资源:

use yii\web\View;
$this->registerJs();
$this->registerJs();

yii\web\View 与 yii\helpers\Html 的区别:

  1、yii\web\View 可以注册脚本或资源,而 yii\helpers\Html 不能;

  2、yii\web\View 可以指定外部脚本的加载位置,而 yii\helpers\Html 不能;

常用属性:

// Html::cssFile($url, $options=[]) 的属性:
url      string    // CSS 的 URL 路径
options  array     // 标签的属性
    condition      // 指定加载 css 的条件(浏览器兼容, 主要用于支持旧版本的浏览器) 
    noscript       // 如果设置为 true, 链接标记将被包装成 <noscript> 标签

// Html::jsFile($url, $options=[]) 的属性:
url      string    // JS 的 URL 路径
options  array     // 标签的属性
    condition      // 指定加载 js 的条件(浏览器兼容, 主要用于支持旧版本的浏览器) 

//$this->registerCssFile($url, $options, $key=null) 的属性:
url       string   // CSS 文件的 url
options   array    // 标签的属性
    depends: 依赖的 css 文件, 当前的 css 文件将在依赖的 css 文件之后加载(两个同时加载)

//$this->registerJsFile($url, $options, $key=null) 的属性:
url       string   // JS 文件的 url
options   array    // 标签的属性
    depends: 依赖的 js 文件, 当前的 js 文件将在依赖的 js 文件之后加载(两个同时加载)
    position: 指定 JS 脚本插入页面的位置
        POS_HEAD: 用在HEAD部分
        POS_BEGIN: 用在 &lt;body&gt; 标签的右边
        POS_END: 用在 &lt;/body&gt; 标签的左边, 默认值

//$this->registerCss($css, $options, $key=null) 的属性:
css     string   // CSS代码
option  array    // 标签的属性

//$this->registerJs($js, $options=self::POS_READY, $key=null) 的属性:
js        string   // JS 代码
position  integet  // 插入页面的位置
    POS_HEAD: 用在HEAD部分
    POS_BEGIN: 用在 &lt;body&gt; 标签的右边
    POS_END: 用在 &lt;/body&gt; 标签的左边
    POS_READY: 为了在 ready 事件中执行代码,这里将自动注册yii\web\JqueryAsset
    POS_LOAD: 为了在 load 事件中执行代码,这里将自动注册yii\web\JqueryAsset

实例:

echo Html::cssFile('a.css', ['condition'=>'if lt IE 9']);
 //<!--[if if lt IE 9]><link href="a.css" rel="stylesheet"><![endif]-->
 
 echo Html::cssFile('a.css', ['noscript'=>true]);
 //<noscript><link href="a.css" rel="stylesheet"></noscript>
 
 echo Html::jsFile('a.js', ['condition'=>'if lt IE 9']);
 //<!--[if if lt IE 9]><script src="a.js"></script><![endif]-->

 $this->registerCss("body{ background:#ff0;}");
//<style>body{ background:#ff0;}</style>

$this->registerCss("body{ background:#f00;}", ['media' => 'print']); // 兼容加载
//<style media="print">body{ background:#f00;}</style>

$this->registerJs("alert('a');", View::POS_HEAD);
//<script type="text/javascript">alert('a');</script>

$this->registerJs("alert('b');", yii\web\View::POS_END); //不用引入类文件
<script type="text/javascript">alert('b');</script>

$this->registerJsFile('a.js');
//<script src="a.js"></script>

$this->registerJsFile('b.js', ['depends'=>[\yii\web\JqueryAsset::className()]]);
//<script src="/advanced/backend/web/assets/a649756c/jquery.js"></script>
//<script src="/b.js"></script>

$this->registerCssFile("a.css");
//<link href="a.css" rel="stylesheet">

$this->registerCssFile("b.css", ['depends'=>[yii\bootstrap\BootstrapAsset::className()]]);
//<link href="/advanced/backend/web/assets/b7c637f7/css/bootstrap.css" rel="stylesheet">
//<link href="/b.css" rel="stylesheet">

$this->registerCssFile("c.css", ['depends'=>[yii\bootstrap\BootstrapAsset::className()],'media'=>'print']);
//<link href="/advanced/backend/web/assets/b7c637f7/css/bootstrap.css" rel="stylesheet">
//<link href="/c.css" rel="stylesheet" media="print">