codeigniter 加载视图特定的 javascript答案

【问题标题】：codeigniter load view specific javascriptcodeigniter 加载视图特定的 javascript
【发布时间】：2013-07-12 11:46:31
【问题描述】：

我有一个注册视图文件，上面有一个很大的表格。因此，我计划使用表单向导插件和 jquery 表单验证插件。我只希望在特定页面上加载这些脚本。我该怎么做呢？这是我的控制器方法。

public function index(){
    $data['title'] = "Register";        
    $this->load->view("site_header", $data); 
    $this->load->view("site_nav"); 
    $this->load->view("content_register"); 
    $this->load->view("site_footer");
}

我在 stackoverflow here 上看到了类似的帖子，但我不明白该怎么做。请帮忙。

【问题讨论】：

This gist 可能会有所帮助。通过使用它，您可以嵌入外部 JavaScript 文件，也可以将内部 JavaScript 语句添加到自定义视图中。

标签： php codeigniter

【解决方案1】：

您可以使用一个变量作为控制器名称，并像这样将该变量传递给您的视图

这是控制器

class Blog extends CI_Controller{
  public function index(){
    $data['controller']="blog_index";
    $this->load->view('header',$data);
  }

  public function second_page(){
   $data['controller']="blog_second_page";
   $this->load->view('header',$data);

 } 
}

Header.php 文件

<? if (isset($controller) && in_array($controller,array('blog_index'))) : ?>

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

<? endif;?>

<? if (isset($controller) && in_array($controller,array('blog_second_page'))) : ?>

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

<? endif;?>

<!-- Other html code here -->

希望这能回答你的问题

【讨论】：

【解决方案2】：

最好将 .js 加载到 footer 中，因为您的 HTML 应该在开始运行脚本之前完全加载。

原因见here

我使用通用页脚来处理 .js 文件

public function index()
    {
        $this->load->view('template/header');
        $this->load->view('template/nav');
        $this->load->view('thing/landing');
        $this->load->view('template/footer');
    }

我的页脚视图是

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$caller_class = $this->router->class;
$caller_method = $this->router->fetch_method();
?>

<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.min.js"></script>

<?php
//look for JS for the class/controller
    $class_js = "public/js/custom-".$caller_class.".js";
    if(file_exists(getcwd()."/".$class_js)){
        ?><script type="text/javascript" src="<?php echo base_url().$class_js; ?>"></script>
        <?php
    } 

    //look for JS for the class/controller/method
    $class_method_js = "public/js/custom-".$caller_class."-".$caller_method.".js";
    if(file_exists(getcwd()."/".$class_method_js)){
        ?><script type="text/javascript" src="<?php echo base_url().$class_method_js; ?>"></script>
        <?php
    } 
?>
</body>
</html>

使用$this->router->class; 或$this->router->fetch_method(); 来检测正在使用的控制器或控制器中的方法。然后检测该控制器/方法是否存在 .js 文件

只需很少的管理，您就可以拥有特定于控制器和/或方法的脚本，而无需摆弄页脚。

然后在文件 pub/js/custom-mycontrollername-mymethod.js 中使用 (jquery);

$(document).ready(function() {
    if ( $( "#mydivthing" ).length ) {
        $('#mydivthing').html("fetching..");
        $.ajax({
                ........
              });
    } else {
        console.log("skipped js segment");
    }
});

这里 jquery 仅在文档为 ready 时运行 （如 jquery 建议的那样） 您还可以使用if ( $( "#mydivthing" ).length ) { 检查您的 div 是否确实在页面上。因此，当事件未加载（为了速度）时，您不会触发事件。但由于 jquery 可能会进行一些检查 - 这可能仅对更大的代码运行有帮助，而不仅仅是单个按钮单击事件。

虽然问题是针对视图的，但此答案涉及控制器/方法级别。所以虽然一个方法可以有多个视图 - 这仍然是用户看到的视图/屏幕。

额外的好处是您可以仅通过文件名将 .js 文件关联到控制器/方法。

【讨论】：

【解决方案3】：

您可以将要加载的 js 作为变量发送。例子在这里；

样品控制器

class mypage extends CI_Controller{
    public function index(){
    $data['js_to_load']="index.js";
    $this->load->view('header',$data);
    $this->load->view('my_html_page');
    }

    public function second_page(){
    $data['js_to_load']='second.js';
    $this->load->view('header',$data);
    $this->load->view('my_second_html_page');

    }
}

header.php - 查看文件

<!-- Needed html code here -->

<? if ($js_to_load != '') : ?>

<script type="text/javascript" src="assets/js/<?=$js_to_load;?>">

<? endif;?>

<!-- Other html code here -->

发生了什么事？

我们将 js 文件设置为 $data 变量，并将 $data 变量传递给 header。在头文件中，我们正在检查是否设置了 js_to_load？如果是，我们将包含 js 文件。

你也可以使用数组传递多个js文件。

样品控制器

class mypage extends CI_Controller{
    public function index(){
    $data['js_to_load']=array("index.js","index1.js","index2.js");
    $this->load->view('header',$data);
    $this->load->view('my_html_page');
    }

    public function second_page(){
    $data['js_to_load']=array("second.js","second2.js","second2.js");
    $this->load->view('header',$data);
    $this->load->view('my_second_html_page');

    }
}

header.php - 查看文件

<!-- Needed html code here -->

<? if (is_array($js_to_load)) : ?>
<? foreach ($js_to_load as $row):
    <script type="text/javascript" src="assets/js/<?=$row;?>">
<?endforeach;?>
<? endif;?>

<!-- Other html code here -->

【讨论】：

我使用isset(); 来检查 $js_to_load 是否在给定的控制器方法中定义，否则会出错。 <? if (isset($js_to_load)) : ?> <script type="text/javascript" src="assets/js/<?=$js_to_load;?>"> <? endif;?>
请注意，最好将脚本放在页面底部 => 引用：“脚本引起的问题是它们会阻止并行下载。[...] 下载脚本时，但是，即使在不同的主机名上，浏览器也不会开始任何其他下载。”

【解决方案4】：

我不明白你的问题。我想您在视图 site_header 或视图 site_footer 中加载 js 文件，为什么不为这些页面加载另一个视图？例如：

public function index(){
    $data['title'] = "Register";        
    $this->load->view("site_header_extra_js", $data); 
    $this->load->view("site_nav"); 
    $this->load->view("content_register"); 
    $this->load->view("site_footer_extra_js");
}

另一个解决方案是在你的视图中添加一个 if 来加载额外的 js 文件检查路径，你可以使用 $this->uri->segment() 来做这个。

【讨论】：

这意味着有几个不同的头文件。您的建议是合乎逻辑的，但是，对于这样一个简单的事情来说，微观管理太多了。感谢您的帮助。

【解决方案5】：

把你要加的js数组传到data里面的header，在view里面加进去，大概还有其他的办法（这种弄脏了controller/view这一行，所以有点脏，但是它有效）。

public function index(){
    $data['title'] = "Register";     
    $data['js'] = array('link', 'link', etc);   
    $this->load->view("site_header", $data); 
    $this->load->view("site_nav"); 
    $this->load->view("content_register"); 
    $this->load->view("site_footer");
}

【讨论】：