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();
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: 用在 <body> 标签的右边 POS_END: 用在 </body> 标签的左边, 默认值 //$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: 用在 <body> 标签的右边 POS_END: 用在 </body> 标签的左边 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">