如何在模板视图中调用脚本?

How to call a script inside a template view?

我正在使用 CodeIgniter 并且我实际上创建了一个具有以下结构的 template.php 文件:

<!DOCTYPE html>
<html lang="en">

   <?php $this->view('partials/header') ?>

   <body class="<?= !isset($backend) ? 'off-canvas-sidebar' : '' ?>">
      <div class="wrapper ">      
         <div class="<?= isset($backend) ? 'main-panel' : '' ?>">
            <div class="content">
               <?php $this->view($content) ?>
            </div>
            <?php $this->view('partials/footer') ?>
         </div>
      </div>

      <!--   Core JS  -->
      <script src="<?= asset_url('assets/js/vendor/core/jquery/jquery.min.js'); ?>"></script>

      <?php 
         //Load dynamic scripts
         if(isset($scripts)) 
         {
            foreach($scripts as $script)
            {
               echo '<script src="'. asset_url($script). '"></script>';
            }
         }
      ?>

   </body>
</html>

基本上当我需要加载一个 view 我在控制器中写:

$view['content'] = 'auth/login';
$view['scripts'] = ['assets/js/general/auth.js'];
$this->load->view('partials/template', $view);

其中 content 是要在 template 中加载的 view 的路径,scripts 包含必须加载的所有 javascript 文件。

问题是在 login.php 文件中,我有:

<script>
    $(document).ready(function() {
        setTimeout(function() {
            $('.card').removeClass('card-hidden');
        }, 400);
    });
    Auth.initialize(true);
</script>

并且这段代码是在页面加载之前执行的,所以实际上我有这样的加载执行:

  1. 加载header
  2. 使用脚本加载内容 (Auth.initialize)
  3. 加载动态脚本

auth.js 是在第 2 步之后加载的,所以我会得到这样的错误:

ReferenceError: $ is not defined

那是因为这些脚本是在之后加载的。

为了解决问题,我可以在 header 中添加脚本,但我不想那样做。

有办法解决这个问题吗?

您可以使用加载回调

function require(url, callback) {
  var e = document.createElement("script");
  e.src = url;
  e.type = "text/javascript";
  e.addEventListener('load', callback);
  document.getElementsByTagName("head")[0].appendChild(e);
}

require("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js", function() {
  $(document).ready(function() {
    setTimeout(function() {
      $('.card').removeClass('card-hidden');
    }, 400);
  });
  console.log('loaded');
});