如何在codeigniter ci中加载javascript css文件

Posted 2023-05-08

【中文标题】如何在codeigniter ci中加载javascript css文件

【英文标题】：How to load javascript css files in codeigniter ci

【发布时间】：2012-08-20 14:11:14

【问题描述】：

我想将我的网站迁移到 CI。 我只是简单地从 ci 示例文件 welcome.php 修改 在 index() 函数中，我加载要显示的视图。 但是，我在头文件中放了许多 javascripts 和 css 文件。 并通过$this->load->view('header'); 调用它 但我无法正确加载 javascript 文件！ 谁能给我一些提示？很难配置如何设置正确的路径。

<script type="text/javascript" src="/assets/javascripts/order.js"></script> 
<script type="text/javascript" src="../assets/javascripts/order.js"></script>   
<script type="text/javascript" src="../../assets/javascripts/order.js"></script>    

我的控制器代码如下

    class Welcome extends CI_Controller 

public function index()

    $this->load->helper('url');     
    $this->base = $this->config->item('base_url');

    $this->load->view('header');
    $this->load->view('welcome_message');

下面是我的文件夹结构

【参考方案1】：

将您的资产文件夹放入applications, system, assets

不在应用程序中，只需在控制器中加载 url 帮助类，您可以在其中调用标题视图部分，例如

$this->load->helper('url');
$this->load->view('header');

只需在头文件中使用类似的内容.. 因为$this->base_url() 返回/ 文件夹..

<script src="<?php echo $this->base_url();?>assets/javascript/jquery.js"></script>

更改文件夹结构，因为应用程序文件夹中的访问仅针对我所知道的核心部分..

如果您想了解更多关于URL Helper的信息，请点击这里链接

【讨论】：

感谢您或您的支持。顺便说一句，如果我想使用像 phpMailler 或 zend 框架这样的库。 sholud 我把这些文件夹放在应用程序，系统级别，正确​​吗？

@poc 是真的，我对 codeigniter 没有太多经验，所以我认为这些库你必须放在 third_party 文件夹中。

@poc 是的，您可以放入third_party 文件夹并了解有关第三方文件夹的更多信息，请点击链接***.com/questions/5248158/…

确保你已经将'url'添加到你的数组中，在此处的config文件夹下的autoload.php中-> $autoload['helper'] = array('url');

使用“类似的东西” $this->base_url() 导致我找不到方法和致命异常的错误，后来意识到我们不需要 $this 并直接调用 echo base_url( ）。现在工作正常！

【参考方案2】：

这是使用最少代码的最佳方式

<script src="<?php echo base_url('assets/javascript/jquery.js');?>"></script>
<script src="<?php echo base_url('assets/css/bootstrap.min.js');?>"></script>

【参考方案3】：

Jogesh_p 的回答肯定会解决您遇到的资产加载问题。我想跟进你提出的这个问题

感谢您或您的支持。顺便说一句，如果我想使用一些图书馆 像 phpMailler 或 zend 框架。

你可以放入应用程序/库/

然后使用库的类名称将其加载到控制器中

$this->load->library('phpmailer');

您可以选择在构造函数或单个方法上加载。

祝你好运！

【参考方案4】：

为了解决我的问题，我创建了辅助函数来加载资产。这是部署在我的应用程序中的代码。 PS：首先我规划了一个好的/灵活的目录结构

[some_helper.php]

/*
 * Created: 2017/12/14 00:28:30
 * Updated: 2017/12/14 00:28:39
 * @params
 * $url_structure = 'assets/js/%s.js'
 * $files = ['main.min', 'social']
 * $echo = FALSE
 *
 */

function load_js($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE)
    $html = "";
    foreach ($files as $file) 
        if($url_structure)
            $file = sprintf($url_structure, $file);
        
        $file_url = base_url($file);
        $html .= "<script src=\"$file_url?v=$version\"></script>";
    
    if($echo) 
        echo $html;
    
    return $html;


/*
 * Created: 2017/12/14 00:28:48
 * Updated: 2017/12/14 00:28:51
 * @params
 * $version = '1.0' // Later load from configuration
 * $url_structure = 'assets/js/%s.css'
 * $files = ['main.min', 'social']
 * $echo = FALSE
 *
 */

function load_css($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE)
    $html = "";
    foreach ($files as $file) 
        if($url_structure)
            $file = sprintf($url_structure, $file);
        
        $file_url = base_url($file);
        echo "<link rel=\"stylesheet\" href=\"$file_url?v=$version\">";
    
    if($echo) 
        echo $html;
    
    return $html;

然后在视图中调用

[some_view.php]

$css = [
    'path' => 'assets/css/%s.css',
    'files' => ['bootstrap.min','style']
];
load_css($css['files'], $css['path'], '1.0', TRUE);

希望它可以帮助某人。 在 OP 的情况下，$css['path'] = 'application/assets/css/%s.css'; 可以解决问题。

更新了Github 上的代码，我会继续更新。

【参考方案5】：

资产/css/bootstrap.min.css"

    <!-- Include JS -->
    <script src="<?php echo base_url();?>assets/js/jquery.js"></script>
    <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>

【讨论】：

能否也请您补充一些解释？

除了问题已经用“base_url()”解决了，不需要复制那个答案。

【参考方案6】：

function addcategory()

    //alert("<?php echo base_url();?>")
     $.ajax(
                complete: function() , //Hide spinner
                url : '<?php echo base_url();?>category/search',
                data:$('#add_category').serialize(),
                type : "POST",
                dataType : 'json',
                success : function(data) 
                    if(data.code == "200")
                    
                        alert("category added successfully");
                    

                        ,
                beforeSend: function(XMLHttpRequest), //$.blockUI();
                        cache: false,
                        error : function(data) 
                            
            );

【讨论】：

function readURL(input) if (input.files && input.files[0]) var reader = new FileReader(); reader.onload = function (e) $('#photo').attr('src', e.target.result); reader.readAsDataURL(input.files[0]); $("#category_photo").change(function() readURL(this); );

class Globel_model extends CI_Model function __construct() // 调用模型构造函数 parent::__construct(); function add_record($tablename,$data) $this->db->insert($tablename, $data);返回;

您可以编辑您的答案，使其包含所有代码。请提供一些有关您的解决方案的其他信息 - 难以掌握的代码墙。