小编Chr*_*itz的帖子

<link rel = preload>必须具有有效的as值

我正在尝试link根据predn上mdn的文档使用标签的preload rel值来预加载视频。

在我的index.html文件中,我将以下内容添加到头部:

<link rel="preload" as="video" type="video/mp4" href="video/2_1.mp4" />
Run Code Online (Sandbox Code Playgroud)

在chrome中,此方法工作正常,可以预加载文件而不会出现问题。

当我在台式机或iphone上在safari 11.3中打开页面时,出现控制台错误消息:

必须有一个有效的as价值

根据文档的“可以预加载哪些类型的内容”部分,其中包含有效值的列表,我肯定使用的是正确的video类型。

我检查了链接标签上的有关移动Safari浏览器预加载的mdn文档,并显示了“兼容性未知”问号。我还检查了caniuse,它似乎表明只要我的移动Safari浏览器版本为11.3,我就可以使用它。

手机和台式机都位于safari 11.3,所以我不确定为什么会出现此错误。

有什么想法/见解吗?

html preload

8
推荐指数
1
解决办法
3843
查看次数

Javascript - 使用字符串连接设置变量

是否可以通过将两个字符串连接在一起形成名称来设置变量?

如果可能的话,我想根据用户点击的对象的类名确定要设置的变量.我知道我可以硬编码一堆if/else if语句,但如果我可以间接引用变量,那将会非常酷.我在想这样的事情:

var owner_read;
var group_read;

function setVariableIndirectly(object){
    var second = object.className; // returns "read"
    var first = object.parentElement.className; // returns "group"

    first + "_" + second = "set this as the new variable";
}
Run Code Online (Sandbox Code Playgroud)

有没有办法做到这一点?

编辑:

这是数据来自的html.

<p class="owner">
    <span class="read" onclick="permissionClick(this)">r</span>
    <span class="write" onclick="permissionClick(this)">w</span>
    <span class="execute" onclick="permissionClick(this)">x</span>
</p>
Run Code Online (Sandbox Code Playgroud)

javascript variables concatenation indirection

7
推荐指数
2
解决办法
2万
查看次数

Webpack-dev-server不通过代理向外部域发送请求

我正在尝试使用webpack-dev-server代理配置将api请求发送到外部域,我似乎无法使其正常工作.

这是我的配置:

var path = require('path')

module.exports = {
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: 'assets'
    },
    devServer: {
        contentBase: 'public',
        proxy:{
            '/api/v1*': {
                target: 'http://laravelandwebpack.demo/',
                secure: false
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

因此,/api/v1...只要我的应用程序向uri 发出请求,它就应该发送该请求http://laravelandwebpack.demo.

在我的Vue应用程序中,我正在使用它vue-resource来发出请求,并且我使用所需的uri前缀默认所有请求:

var Vue = require('vue')
Vue.use(require('vue-resource'))

new Vue({
    el: 'body',
    http: {
        root: '/api/v1', // prefix all requests with this
        headers:{
            test: 'testheader'
        }
    },
    ready: function (){
        this.$http({
            url: 'tasks',
            method: 'GET'
        }).then(function (response){
            console.log(response); …
Run Code Online (Sandbox Code Playgroud)

proxy vue.js webpack-dev-server vue-resource

6
推荐指数
1
解决办法
1883
查看次数

在 nuxt 的 head 标签中包含自定义脚本

我有一个自定义脚本,我想将其包含在我的 nuxt 项目中。

问题是,这个脚本需要在dom 加载之前包含在内。它包含此特定项目的覆盖。

我的资产文件夹由脚本子文件夹构成:

资产

在我的 nuxt.config.js 文件中,我有以下内容:

export default {
  css: ["~/assets/css/main.scss"],
  head: {
    script: [
      {
        src: "https://cdnjs.cloudflare.com/ajax/libs/aframe/1.0.4/aframe.min.js", 
        src: "_nuxt/assets/scripts/bundle.js", // this is the script that I'm trying to include
      },
Run Code Online (Sandbox Code Playgroud)

_nuxt/在查看了如何成功包含其他一些资产后,我添加了

流动资产和非流动资产

在 dom 加载之前我们需要发生的所有事情都已经捆绑在文件中,尽管这是非常规的,但如果我们能够加载它,这将是可行的。

我已经浏览了有关head此配置或实际 .vue 文件中的属性的 nuxt 文档,但它讨论的是外部资源,而不是项目本地的资源。

我如何正确地将此文件包含在 nuxt 的头部中?

另外,如果有一种正确的方法将该包的源代码与主 nuxt js 代码分开,以便它可以正确地通过 nuxt/tsc,我当然愿意。

vue.js nuxt.js

6
推荐指数
1
解决办法
1万
查看次数

禁用网站上的Safari工具提示

是否可以从网站级别禁用safari包含的工具提示?

我一直在寻找,我看到有很多方法可以为你的本地机器禁用它,但如果我有自己的自定义工具提示,我正在创建(我正在创建一个在Sencha extjs项目中格式化的表)我可以告诉Safari的webkit不显示它的工具提示?

如果从网站上无法做到,那么有没有办法控制Safari工具提示中显示的文字?

目标是在将鼠标悬停在表格中的字段上时,显示包含记录详细信息的工具提示.

我已经有一个字段,其中包含我用于Sencha项目工具提示的详细信息.如果我可以告诉Safari(或任何其他强制它自己的工具提示到网站上的浏览器)使用该信息,它也可以工作.

safari webkit tooltip

5
推荐指数
0
解决办法
531
查看次数

Laravel:覆盖Bundle的服务提供商

我有一个项目使用Sentinel包为Laravel.

不久前,我问了一个关于扩展捆绑包中提供的模型的问题.我接受的答案有效,但需要在vendor文件夹中编辑软件包的代码.

从那以后,我运行了一个composer update命令,我应用的更改被覆盖了(这并不奇怪).

我对laravel现在如何工作了解得更多,所以我能够追溯我的应用程序引用捆绑服务的终点.在我的config/app.php文件中,我有服务提供者参考:

'Sentinel\SentinelServiceProvider',
Run Code Online (Sandbox Code Playgroud)

SentinelServiceProvider服务有一个register方法来注册RepoServiceProvider哪个是我需要覆盖的类.

我的计划是创建两个新文件:ExtendedSentinelServiceProvider.phpExtendedRepoServiceProvider.php.

ExtendedRepoServiceProvider.php文件中,我可以用我的自定义User类替换用于用户存储库绑定的类:

    // Bind the User Repository
    $app->bind('Sentinel\Repo\User\UserInterface', function($app)
    {
        return new ExtendedSentryUser( // This is my custom model that I want the ExtendedRepoServiceProvider to use
            $app['sentry']
        );
    });
Run Code Online (Sandbox Code Playgroud)

ExtendedSentinelServiceProvider.php文件中,我将RepoServiceProvider用我新修改的ExtendedRepoServiceProvider类替换现有的类引用:

public function register()
{
    $loader = \Illuminate\Foundation\AliasLoader::getInstance();
    $loader->alias('Sentry', 'Cartalyst\Sentry\Facades\Laravel\Sentry');

    $repoProvider = new ExtendedRepoServiceProvider($this->app); // This would be my new …
Run Code Online (Sandbox Code Playgroud)

php laravel-4 cartalyst-sentry

5
推荐指数
1
解决办法
1878
查看次数

我需要清除哪些Laravel缓存才能删除有关丢失迁移文件的错误?

我的应用程序中有几个表的迁移.表格是:

  • 技能
  • 媒体
  • 笔记

people每个其他表之间存在一对多的关系.

// The people table definition

Schema::create('people', function (Blueprint $table) {
    $table->uuid('id');
    $table->primary('id');
    ...
    $table->timestamps();
});


// the skill table definition with the foreign key constraint referencing people

Schema::create('skills', function (Blueprint $table) {
    $table->uuid('id');
    $table->primary('id');
    $table->uuid('person_id');
    $table->foreign('person_id')
            ->references('id')->on('people')
            ->onDelete('cascade');
    ...
    $table->timestamps();
});
Run Code Online (Sandbox Code Playgroud)

当我通过迁移创建迁移时artisan意外创建了skills迁移文件people.

这导致了一个问题,因为当您运行时php artisan migrate,文件将按时间戳顺序触发,如果在定义外键约束之前未建立主键,则会出现错误,例如

文件:

2016_02_24_174227_create_people_table.php
Run Code Online (Sandbox Code Playgroud)

文件触发:

2016_02_24_174221_create_skills_table.php
Run Code Online (Sandbox Code Playgroud)

因为skills文件名称中的时间戳前缀较小(17:42:21在17:42:27之前).这意味着外键约束skills正在寻找people尚不存在的主键.

所以为了解决这个问题,我将文件重命名2016_02_24_174227_create_people_table.php2016_02_24_170000_create_people_table.php. …

php database-migration laravel artisan laravel-5.2

5
推荐指数
1
解决办法
8093
查看次数

vim 从命令行水平和垂直拆分

我正在尝试从命令行在 vim 中打开 3 个文件。我想要左边的一个文件与其他两个文件垂直拆分,其余两个文件将水平拆分。

  | 2
1 |---
  | 3
Run Code Online (Sandbox Code Playgroud)

我知道我可以使用该命令vim -O Notes.markdown -O Plan.markdown在垂直拆分中打开前两个文件,一旦进入,我可以切换到第二个文件,ctl w然后使用该命令split History.markdown来实现我想要的,但我希望能够从命令行在一行中完成所有操作。

我尝试使用vim -O Notes.markdown -O Plan.markdown -c split History.Markdown接近的命令,但它拆分了第一个和第二个文件,在垂直拆分的右侧留下了第三个文件。

我无法弄清楚的是,我是否可以告诉 vim 使用ctl命令行中的密钥,以便我可以运行类似... -c <switchwindowcommand> | split History.markdown. 有没有办法指定控制键?

vim split

4
推荐指数
1
解决办法
1810
查看次数

Bootstrap:导航栏列问题

我正在尝试使用列系统在Bootstrap中构建一个导航栏,我遇到了一些问题,我不确定我做错了什么.

我想最终得到一个看起来像这样的导航栏:

在此输入图像描述

我想要一行左边对齐的列带有徽标,右边的对齐列带有用户按钮,然后是第二行带有中心对齐的按钮.

我的想法是我可以使用类"col-lg-6 col-md-6"创建两个div,一个用于徽标,一个用于用户按钮.这两个将创建第一个12列的行,这将强制跟随整个新行的标记.

但是,当我尝试这样做时,我最终会将所有内联运行并且无序运行.

在此输入图像描述

我知道我可以通过添加我自己的自定义css(这是我能够模拟第一个屏幕截图)来做到这一点,但我的首选是坚持使用bootstrap列系统所以我的ad-hoc css不事情发生了.我还想了解我做错了什么(这是我使用bootstrap的第一个项目,所以我仍然试图克服学习曲线).

这是我的演示页面的代码:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/additions.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid"> …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap

4
推荐指数
1
解决办法
2万
查看次数

使用Browserify时使我的Vue实例全局化,以便开发人员工具可用

我开始学习一些新的前端工具,特别是Vue.js,Gulp,Node,Babel和Browserify.

我已经完成了所有工作,但我遇到了一个问题,我为我的应用程序创建的Vue实例不是全局的,因此(我假设)我无法访问我的浏览器的Vue devtools.

在我的gulpfile中,我有一个捆绑javascript应用程序的任务:

gulp.task('build-js', function (){
    return browserify('src/javascript/app.js')
        .transform(babelify, { presets: ['es2015'] })
        .bundle()
        .on('error', function (e){
            console.log(e.message);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('public/javascript'));
});
Run Code Online (Sandbox Code Playgroud)

在我的app.js文件中,我像这样实例化我的Vue实例:

var Vue = require('vue');

Vue({
    el: '#app',
    data:{
        message: 'Worked!!!'
    }
});
Run Code Online (Sandbox Code Playgroud)

作为测试,相关的html看起来像这样index.html:

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model='message'></input>
    </div>
    <script type="text/javascript" src="javascript/bundle.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)

代码有效; 我可以键入我的绑定输入对象并查看标题中镜像的结果,但我无法访问Vue devtools:

在浏览器中缺少开发工具

并且扩展名已经安装并启用:

vue devtools扩展安装

我一直在寻找周围的解决方案,并已看到帖子里的人说的Vue分配给windowglobal对象,但结合了Vue的图书馆,不是我的特定实例.

有没有办法让我的Vue实例全局化?我误解了这应该如何运作?

javascript google-chrome browserify gulp vue.js

4
推荐指数
1
解决办法
2662
查看次数