如何在Yii Framework中包含Javascript或CSS文件？
我想在我的网站上创建一个包含小型Javascript应用程序的页面，因此我想在特定视图中包含.js和.css文件。
18个回答
169
像这样：
<?php
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
- Alexander Hramov
9
1我应该从控制器还是视图中调用这个？ - user1077220
3你应该从视图中调用这个函数。 - Alexander Hramov
2@user1077220 这没有任何影响。 - Dzhuneyt
11CSS和JS注册与视图相关，因此更合理地从视图中调用它。 - Alexander Hramov
1无论您在哪个视图中添加上面的片段，每页只需添加一次。 - Alexander Hramov
显示剩余4条评论
47
您可以通过添加
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');
- ysing
34
我很喜欢回答这个问题。
有许多地方我们会有CSS和JavaScript文件，例如在受保护文件夹之外的CSS文件夹中、扩展程序和小部件的CSS和JS文件，在使用大量Ajax时需要外部引入，以及核心框架的JS和CSS文件，有时候也需要外部引入。所以有一些方法可以解决这个问题。
引入核心框架的JS文件，如jquery.js、jquery.ui.js
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
如何在受保护文件夹之外的css文件夹中引用文件？
<?php
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/css/example.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/css/example.js');
?>
从扩展或小部件中引用css和js文件。
这里fancybox是一个放置在受保护文件夹下的扩展名。 我们引用的文件路径为：/protected/extensions/fancybox/assets/
<?php
// Fancybox stuff.
$assetUrl = Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('ext.fancybox.assets'));
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.fancybox-1.3.4.pack.js');
Yii::app()->clientScript->registerScriptFile($assetUrl.'/jquery.mousewheel-3.0.4.pack.js');
?>
此外，我们可以包含核心框架文件: 例如：我正在包含CListView js文件。
<?php
$baseScriptUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('zii.widgets.assets'));
Yii::app()->clientScript->registerScriptFile($baseScriptUrl.'/listview/jquery.yiilistview.js',CClientScript::POS_END);
?>
- 有时候，我们需要在渲染视图中使用从ajax调用接收到的zii部件或扩展，并在外部包含js文件，因为每次加载新的ajax文件会导致调用js函数时出现冲突。
详情请参阅我的博客文章
- Onkar Janwa
21
在你的conf/main.php文件中很容易实现。这是我使用bootstrap的例子，你可以在这里看到。
'components'=>array(
'clientScript' => array(
'scriptMap' => array(
'jquery.js'=>false, //disable default implementation of jquery
'jquery.min.js'=>false, //desable any others default implementation
'core.css'=>false, //disable
'styles.css'=>false, //disable
'pager.css'=>false, //disable
'default.css'=>false, //disable
),
'packages'=>array(
'jquery'=>array( // set the new jquery
'baseUrl'=>'bootstrap/',
'js'=>array('js/jquery-1.7.2.min.js'),
),
'bootstrap'=>array( //set others js libraries
'baseUrl'=>'bootstrap/',
'js'=>array('js/bootstrap.min.js'),
'css'=>array( // and css
'css/bootstrap.min.css',
'css/custom.css',
'css/bootstrap-responsive.min.css',
),
'depends'=>array('jquery'), // cause load jquery before load this.
),
),
),
),
- Knito Auron
2
那么，你如何在需要实现它的地方“调用”JavaScript呢？ - Novica89
4你可以使用以下方式：Yii::app()->clientScript->registerCoreScript('bootstrap');意思是注册Bootstrap核心脚本。 - Knito Auron
7
在视图中添加以下内容：
请注意在注册js文件时的第二个参数，它代表您的脚本位置。当您设置为CClientScript::POS_END时，您将使HTML在Javascript加载之前渲染。
<?php
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
$cs->registerCssFile('/css/yourcss.css');
?>
请注意在注册js文件时的第二个参数，它代表您的脚本位置。当您设置为CClientScript::POS_END时，您将使HTML在Javascript加载之前渲染。
- Mohammad Anini
6
有许多方法可以将JavaScript和CSS包含在您的Yii应用程序中。今天我将演示三种简单而有用的方法。
通过编辑config/main.php来添加js、css的简单方法。
// application components
'components'=>array(
// ...
'clientScript'=>array(
'packages'=>array(
'jquery'=>array(
'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
'js'=>array('jquery.min.js'),
)
),
),
// ...
),
使用getClientScript
通常情况下，我们会将代码块添加到控制器或主题布局中。
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/yourscript.js');
$cs->registerCssFile($baseUrl.'/css/yourcss.css');
简而言之：
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file',CClientScript::POS_END);
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');
包含核心js文件
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
更快的Yii API文档：http://yii.codexamples.com/
- Truongnq
2
4@Christian，这不是一个论坛，如果您提供新的和有用的信息，可以继续补充问题。请注意不要改变原意。 - Samuel Liew
@Truongnq 如果我将这个代码块
$baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css'); 放在控制器中，我应该在哪里分配 $cs 呢？此外，在我的控制器的 actionView 中，我有这行代码 $this -> render('view', array('model' => $this -> loadModel($id), ));，我应该把它放在这里吗？ - Compaq LE2202x6
要在特定视图中包含JS和CSS文件，您可以通过控制器传递参数false，true来实现，这将包括例如CSS和JS：
$this->renderPartial(
'yourviewname',
array(
'model' => $model,
false,
true
)
);
- Wasim Pathan
6
这里有一个使用CDN和离线脚本的好方法。
我在构建每个应用程序时都使用此代码，因此您可以在任何应用程序中使用它。
包含的脚本：
- main.css
- main.js
- jQuery
- jQuery / CD
- Bootstrap 3.1
- Bootstrap 3.1 / CDN
- Fancybox 2
- Fancybox 2 / CDN
- FontAwesome 4
- FontAwesome 4 / CDN
- Google Analytics Script
步骤1：
将此代码放入config/main.php中。
'params'=>array(
'cdn'=>true, // or false
...
步骤2：
在应用程序根目录中创建“resoreses”文件夹，并将您的脚本放置在其中。
res/
--js
--css
--img
--lib
--style
..
步骤3：
将此代码放入components/controller.php文件中。
public function registerDefaults()
{
$cs = Yii::app()->clientScript;
if (Yii::app()->params['cdn']){
$cs->scriptMap = array(
'jquery.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
'jquery.min.js' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
);
$cs->packages = array(
'bootstrap' => array(
'basePath' => 'application.res',
'baseUrl' => '//netdna.bootstrapcdn.com/bootstrap/3.1.1/',
'js' => array('js/bootstrap.min.js'),
'css' => array('css/bootstrap.min.css'),
'depends' => array('jquery')
),
);
} else {
$cs->packages = array(
'bootstrap' => array(
'basePath' => 'application.res',
'baseUrl' => Yii::app()->baseUrl . '/res/lib/bootstrap/',
'js' => array('js/bootstrap.js'),
'css' => array('css/bootstrap.css'),
'depends' => array('jquery')
),
);
}
$cs->registerPackage('bootstrap');
$cs->registerCSSFile(Yii::app()->baseUrl . '/res/style/main.css');
$cs->registerScriptFile(Yii::app()->baseUrl . '/res/js/main.js');
}
public function registerFancybox($buttons = false, $thumbs = false)
{
$cs = Yii::app()->clientScript;
$cs->packages = array(
'fancybox' => array(
'basePath' => 'application.res',
'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/',
'js' => array('lib/jquery.mousewheel-3.0.6.pack.js', 'source/jquery.fancybox.pack.js'),
'css' => array('source/jquery.fancybox.css'),
'depends' => array('jquery')
),
'fancybox-buttons' => array(
'basePath' => 'application.res',
'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
'js' => array('jquery.fancybox-buttons.js'),
'css' => array('jquery.fancybox-buttons.css'),
),
'fancybox-thumbs' => array(
'basePath' => 'application.res',
'baseUrl' => Yii::app()->baseUrl . '/res/lib/fancybox/source/helpers/',
'js' => array('jquery.fancybox-thumbs.js'),
'css' => array('jquery.fancybox-thumbs.css'),
)
);
$cs->registerPackage('fancybox');
if ($buttons)
$cs->registerPackage('fancybox-buttons');
if ($thumbs)
$cs->registerPackage('fancybox-thumbs');
}
public function registerFontAwesome(){
$cs = Yii::app()->clientScript;
if (Yii::app()->params['cdn']):
$cs->packages = array(
'fontAwesome' => array(
'basePath' => 'application.res',
'baseUrl' => '//netdna.bootstrapcdn.com/font-awesome/4.0.0/',
'css' => array('css/font-awesome.min.css'),
)
);
else:
$cs->packages = array(
'fontAwesome' => array(
'basePath' => 'application.res',
'baseUrl' => Yii::app()->baseUrl . '/res/lib/font-awesome/',
'css' => array('/css/font-awesome.min.css'),
)
);
endif;
$cs->registerPackage('fontAwesome');
}
public function registerGoogleAnalytics()
{
if($this->config('settings_google_analytics_id')){
Yii::app()->clientScript->registerScript('GA',"
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '".Yii::app()->params['cdn']."', '{$_SERVER['SERVER_NAME']}');
ga('send', 'pageview');
");
}
}
步骤4： 在//layouts/main.php中这样调用函数。
Yii::app()->getController()->registerDefaults();
Yii::app()->getController()->registerFontAwesome();
Yii::app()->getController()->registerGoogleAnalytics();
- Abudayah
2
我在使用部分渲染时遇到了困难，不知道最佳方法是什么。我的JS文件之间存在冲突。哪种方法最好？ - chapskev
不错的解决方案。我会在我的应用程序中尝试它。 - Mohammad Fareed
6
通过将以下行添加到您的视图文件中，可以执行类似此操作的操作;
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/javascript/file'); Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/path/to/css/file');请注意，这些代码行将在您的视图文件中添加JavaScript和CSS文件。
- Chaulagai
5
此外，如果您想添加模块资产（CSS和JS），可以使用以下逻辑。请注意，您需要指示正确的路径到getPathOfAlias：
public static function register($file)
{
$url = Yii::app()->getAssetManager()->publish(
Yii::getPathOfAlias('application.modules.shop.assets.css'));
$path = $url . '/' . $file;
if(strpos($file, 'js') !== false)
return Yii::app()->clientScript->registerScriptFile($path);
else if(strpos($file, 'css') !== false)
return Yii::app()->clientScript->registerCssFile($path);
return $path;
}
上述代码来自基于GPL的Yii框架的Webshop应用程序。
- esengineer
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接