如何在模板视图中调用脚本?
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>
并且这段代码是在页面加载之前执行的,所以实际上我有这样的加载执行:
- 加载header
- 使用脚本加载内容 (Auth.initialize)
- 加载动态脚本
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');
});
我正在使用 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>
并且这段代码是在页面加载之前执行的,所以实际上我有这样的加载执行:
- 加载header
- 使用脚本加载内容 (Auth.initialize)
- 加载动态脚本
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');
});