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
 * @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); ?>

解决Yii2在页面底部加载JS,语法提示失效

加入script 标签即可，注意只有 方案二有效，知道有其他方法的 ，望告知，谢谢！

<script type="text/javascript">
<?php $this->beginBlock('js') ?> 

  //js代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Yii2中使用asset压缩js,css文件的方法

    官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

  • yii2简单使用less代替css示例

    添加组件php composer.phar require --prefer-dist singrana/yii2-less "*" 修改配置文件`main.php' 'components' => [ 'assetManager' => [ 'converter' => [ 'class' => \singrana\assets\Converter::className(), ], ], ], 在AppAsset中 class AppAsset extends

  • yii2 页面底部加载css和js的技巧

    一般来说,网页内部的js文件或代码,都是放置在网页底部</body>的前面,这是因为网页自上而下加载,用户在访问我们页面的时候尽量不要因为加载js展现过长时间的空白页面,停留时间过长就白白流失了用户量. yii2中是集成了jQuery的,而且jQuery文件是加载在页面底部的,因此,如果我们的js代码段不在页面底部加载,就很大可能会发生$未定义的友好提示. 我这废话一大堆得毛病确实需要去挂个号看看了... 先来看看js代码段怎么处理 <?php $this->registerJs(

  • Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

    本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

  • 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; /** * @

  • 解决springMVC 跳转js css图片等静态资源无法加载的问题

    web.xml中 servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-va

  • IDEA配置静态资源热加载操作(Springboot修改静态资源不重启)

    第一步: 修改file->settings->compiler->build project automatically 第二步: 按ctrl+shift+a,搜索Registry双击进去,点击面板搜索running,勾选下面的值: 代码的热加载可以使用spring-boot-devtools,百度下就有很多,个人感觉不好用,修改代码需要重启项目,很烦,非常鸡肋,所以我不用,哈哈哈- 补充知识:idea实现修改html等springboot下static目录静态资源重新加载 对于前后端不

  • 使用Node.js搭建静态资源服务详细教程

    使用Node.js搭建静态资源服务详细教程

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如果有使用express框架,用express.static一行代码就可以达到目的了: app.use(express.static('public')) 这里我们要实现的正是express.static背后所做工作的一部分,建议同步阅读该模块源码. 基本功能 不急着写下第一行代码,而是先梳理一下就基

  • Node.js开发静态资源服务器

    Node.js开发静态资源服务器

    目录 正文 静态资源服务器 模块化 最后 正文 在09年Node.js出来后,让前端开发人员的开发路线变的不再那么单调,经过这么多年的发展,我们的开发基本已经离不开Node.js,不管是用作于工具类的开发,还是做完服务端的中间层,Node.js都占据了非常重要的地位,今天我们就一起通过原生的js+Node来实现一个简单的静态资源服务,如果你还不了解这方面的知识,那就跟我一起来学习吧! 静态资源服务器 Node.js经过这么多年的发展,已经有了很多很优秀的基础框架或类库,像express.js.K

  • 在SpringBoot中静态资源访问方法

    在SpringBoot中静态资源访问方法

    一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/main/resources目录文件中,这样可以达到在项目启动时候可以自动加载为项目静态地址目录到classpath下 ,静态访问地址其实是使用 ResourceHttpRequestHandler 核心处理器加载到WebMvcConfigurerAdapter进行对addResourceHandlers

  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了. 我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决. cd vue demo npm run dev //运行程序 npm run bulid //webpack打包 处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/a

  • 基于Springboot2.3访问本地路径下静态资源的方法(解决报错：Not allowed to load local resource)

    最近在做的一个项目中有一个比较奇葩的需求: 要在springboot中,上传本地的图片进行展示 我的第一反应是,直接在数据库字段加一个存储本地路径的字段,然后用thymeleaf的th:src渲染到前端就好了嘛! 理想很丰满,但现实却很骨感~ 前端报了这样的错误Not allowed to load local resource 于是我想到了可以使用IO将图片先上传到static/images目录下,这样就不会出现禁止访问本地路径的问题了 但是这样实现,问题又来了:上传后的图片必须重启sprin

  • linux服务器上使用nginx访问本地静态资源的方法

    1.查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3.将端口号修改为8080 4.修改nginx服务配置 vim /etc/nginx/conf.d/nginx.conf 5.重启nginx服务 service nginx restart 6.页面尝试访问本地资源 7.访问成功! 总结 以上所述是小编给大家介绍的linux服务器上使用nginx访问

  • nginx实现发布静态资源的方法

    nginx实现发布静态资源的方法

    步骤 将准备好的静态资源文件放在指定文件夹 更改nginx的配置文件:nginx.conf 启动nginx服务:start nginx (一定要切换到nginx的目录下) 在浏览器中检查是否发布成功 实际操作 把所发布的静态网页放入指定文件夹: 更改nginx的配置文件: nginx.conf配置内容如下: #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice;

随机推荐