Yii2 加载css、js 载静态资源

Yii2提供了AppAsset类管理静态资源,在使用Yii2 布局模板时,如果想在某个页面内部写一段js 并且在页面底部,如果直接使用 script 标签是不可以的。

使用AppAsset类管理静态资源

打开assetsAppAsset.php,定义 addJs(),addCss() 分别用于在静态页面引入外部js、css 文件

1、修改AppAsset.php文件代码
namespace backend\assets;
use yii\web\AssetBundle;
/**
 * @author Qiang Xue <[email protected]>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = "@webroot";
    public $baseUrl = "@web";
    //默认自动加载样式
    public $css = [
        "css/site.css",
    ];
    //默认自动加载js
    public $js = [
    ];
    //依赖关系管理
    public $depends = [
        "yii\web\YiiAsset",
        "yii\bootstrap\BootstrapAsset",
    ];    
    //定义按需加载JS方法,注意加载顺序在最后  
    public static function addJs($view, $jsfile) {  
        $view->registerJsFile(
            $jsfile,
            [
                AppAsset::className(),
                "depends" => "backend\assets\AppAsset"
            ]
        );  
    }  
    //定义按需加载css方法,注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile(
            $cssfile,
            [
             AppAsset::className(),
             "depends" => "backend\assets\AppAsset"
            ]
        );  
    }  
}

2、在静态页面调用AppAsset.php

<?php

use backend\assets\AppAsset;
AppAsset::register($this);
AppAsset::addJs($this,Yii::$app->request->baseUrl."/js/a.js");
AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/b.css");
?>

在网站页面底部加载javascript代码

  网页内部的js文件或代码,根据页面加载顺序,避免执行js时间过程导致页面空白,导致用户体验不好问题。一般放置在网页底部</body>的后面。

方案一

<?php
$this->registerJs("
    $(function () {
    //为所欲为的写你想要写的js代码吧
    
    });
", \yii\web\View::POS_END);

方案二

<?php $this->beginBlock(‘js‘) ?>

//js代码
    
<?php $this->endBlock() ?>  
<?php $this->registerJs($this->blocks[‘js‘], \yii\web\View::POS_END); ?>

[转自:@烟火里的尘埃]

时间: 2024-10-03 07:26:06

Yii2 加载css、js 载静态资源的相关文章

apache代理tomcat无法加载css,js,图片等资源的解决方法

这个问题苦恼了很久,应该就是开发的代码获取项目的相对路径和绝对路径的问题,但是不改代码用apache代理解决能否实现呢?答案是可以的. 下面是apache代理tomcat访问并https访问的配置 apache2.2,yum安装的 tomcat7,jdk1.7 tomcat的server.conf配置 在Host里加上Context <Host name="localhost"  appBase="webapps" unpackWARs="true&

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp

原文:仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp 源代码下载地址:http://www.zuidaima.com/share/1550463482612736.htm 仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 自己在项目中有用到,用于脚本合并输出 , 使用示例: <link rel="stylesheet" type="text/css" href="http://www.zuidaima.c

在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案

方案一.拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <mvc:resources location="/" mapping="/**/*.js"/> <mvc:resources location="/" mapping="/**/*.css"/> <mvc:resources location="/assets/" mapping="/a

spring mvc 处理html,css,js等静态文件

在spring mvc,可以使用<mvc:resources/>标签来处理css,js,images等文件,使用方法如下: <mvc:resources location="/WEB-INF/pages/welcome/" mapping="/welcome/*.html"/> <mvc:resources location="/WEB-INF/pages/welcome/js/" mapping="/we

springboot 中另一种加载css/js失败问题

首先在控制器中存在这样的一个映射 @RequestMapping(value = {"/login","login.html","user/login","user/login.html"}) public String Login(){ System.out.println("xx"); return "user/login"; } 理论上这四个URL都应该映射到一个html文件上 当

IDEA ssm项目无法加载css js等文件

在 spring-servlet.xml  配置文件中加入 1 <mvc:default-servlet-handler/> 原文地址:https://www.cnblogs.com/dailinfeng/p/10502450.html

Fiddler 屏蔽css JS PNG 等资源

REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav|js|jpeg)(\?.*)?$ 原文地址:https://www.cnblogs.com/lexus168/p/12667081.html

Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文件,如果你输入某个css的文件在浏览器中得到的直接是404错误(例如http://localhost:8080/iMax_view/css/classify.css),表示路径肯定没有错,这是因为你在web.xml中配置的springservlet ]<!-- springmvc前端控制器,rest