在 Yii 框架中包含 CSS、javascript 文件

IT技术 javascript php css yii
2021-02-25 16:05:55

如何在 Yii 框架中包含 Javascript 或 CSS 文件?

我想在我的网站上创建一个页面,该页面正在运行一个小的 Javascript 应用程序,所以我想在特定视图中包含.js.css文件。

6个回答

像这样的东西:

<?php  
  $baseUrl = Yii::app()->baseUrl; 
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
  $cs->registerCssFile($baseUrl.'/css/yourcss.css');
?>
您应该从视图中调用它
2021-04-25 16:05:55
这应该每页添加一次(无论您将在哪个视图中添加上面的代码段)
2021-04-30 16:05:55
CSS 和 JS 注册与视图相关。所以更合乎逻辑地从一个角度调用它。
2021-05-07 16:05:55
我应该从控制器中调用它吗?
2021-05-10 16:05:55
@ user1077220 没什么区别。
2021-05-14 16:05:55

您可以通过添加

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/path/to/your/script');

我喜欢回答这个问题。

他们有很多地方我们有 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函数时产生冲突。

更多细节看我的博客文章

在您的 conf/main.php 中很容易。这是我的引导程序示例。你可以在这里看到

'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.
            ),
        ),
    ),
),
那么,您将如何在需要实现的地方“调用”javascript?
2021-05-11 16:05:55
你可以这样使用: Yii::app()->clientScript->registerCoreScript('bootstrap');
2021-05-20 16:05:55

在视图中,添加以下内容:

<?php  
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile('/js/yourscript.js', CClientScript::POS_END);
  $cs->registerCssFile('/css/yourcss.css');
?>

请注意注册js文件时的第二个参数,它是你的脚本的位置,当你设置它CClientScript::POS_END时,你让HTML在加载javascript之前呈现。