公孙二狗

公孙二狗 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

公孙二狗 赞了文章 · 2018-05-05

css3 实现圆角的三角形

达到的效果:

clipboard.png

今天碰到这样一个需求,为带有圆角的框加一个角标。而且角标是圆角的。
我真的不想切图,怎么办。突然想到css3可以实现条纹背景,那这不就可以了么

background: linear-gradient(45deg, transparent 50%, #61C4CF 0%);
background-size: 16px 16px;
border-top-right-radius: 3px;

三行代码解决问题,继续愉快的coding

查看原文

赞 14 收藏 9 评论 3

公孙二狗 收藏了文章 · 2018-05-05

css3 实现圆角的三角形

达到的效果:

clipboard.png

今天碰到这样一个需求,为带有圆角的框加一个角标。而且角标是圆角的。
我真的不想切图,怎么办。突然想到css3可以实现条纹背景,那这不就可以了么

background: linear-gradient(45deg, transparent 50%, #61C4CF 0%);
background-size: 16px 16px;
border-top-right-radius: 3px;

三行代码解决问题,继续愉快的coding

查看原文

公孙二狗 赞了文章 · 2018-04-25

真正解决iframe高度自适应问题

1.前言

解决iframe高度自适应问题有两种方法
1.pym
2.手动设置iframe的高度

本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂

  • 如果使用iframe时,遇到以下的需求:

    • iframe的高度始终等于嵌入页面内容的高度,而不是屏幕的高度
    • 右侧不允许出现两个滚动条
    • iframe的高度自适应不仅仅是指刚加载进来时,也有可能嵌入内容的高度会随点击变化(如:下拉菜单,左侧导航栏等)
    • 页面可能同时嵌入多个iframe

2.contentWindow对象

*需要起个服务,不要直接在本地打开

这是个只读属性,返回指定的iframe的window对象

拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};

为了监测网页高度是否因为点击了某个下拉按钮高度变化,我们建立一个定时器任务,这样一直监视着子网页的高度。

 setInterval(function () {
            setIframeHeight($('#iframe')[0])
        }, 200)

页面有可能同时存在多个iframe

$(".flexiframe").each(function (index) {//iframe公用类名:flexiframe
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

如果此时,你发现当子页面高度变高时,高度可以自适应的变高,但在变低时,会发现父页面的高度并没有向我们想象的随着子页面降低,导致底部留有大面积空白的问题,请继续往下看

3.文档声明的重要性

  • 将子页面的文档声明改为就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4.demo

父页面:a.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a</title>
</head>

<body style="background-color:red">
    <iframe id="iFrame" class="flexiframe" data-original="./b.html" style="padding: 0;width:100%;" marginwidth="0" frameborder="no" scrolling="no" height="2000px"></iframe>
    <!-- <iframe id="iFrame1" class="flexiframe" data-original="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <!-- <iframe id="iFrame2" class="flexiframe" data-original="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <script data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script data-original="./flexiframe.js"></script>
</body>

</html>

./flexiframe.js

// 使用前先将子页面文档声明改为
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};
$(".flexiframe").each(function (index) {
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

子页面b.html,分别注释两种声明方式,点击变大变小按钮看一下右侧滚动条的变化,(细节可以F12看一下iframe种的html和body跟div的高度关系)

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<div id="b_conntent">
        <div style="width:100px;background-color:blue">
                <div style="height:2000px">
                        <button id="btn">小</button>
                </div>
        </div>
</div>
<script data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
        $('#btn').on('click', function () {
                if ($(this).text() == '小') {
                        $(this).text('大').parent().css('height', '200px')
                } else {
                        $(this).text('小').parent().css('height', '2000px')
                }
        })
</script>

5.总结

1.有时间还是要了解下html的进化历史。
2.本文flexiframe.js可以直接使用,但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度,跨域的下次再说。
3.欢迎指出问题或留言加深本文的深度,例如html5已经不需要声明DTD,但是我解决这个问题不得不改一下DOCTYPE,退化到html4,为什么在html5中子页面html和body的高度不是由内部的内容决定的,而是等于父元素iframe的高度?

查看原文

赞 14 收藏 9 评论 2

公孙二狗 收藏了文章 · 2018-04-25

真正解决iframe高度自适应问题

1.前言

解决iframe高度自适应问题有两种方法
1.pym
2.手动设置iframe的高度

本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂

  • 如果使用iframe时,遇到以下的需求:

    • iframe的高度始终等于嵌入页面内容的高度,而不是屏幕的高度
    • 右侧不允许出现两个滚动条
    • iframe的高度自适应不仅仅是指刚加载进来时,也有可能嵌入内容的高度会随点击变化(如:下拉菜单,左侧导航栏等)
    • 页面可能同时嵌入多个iframe

2.contentWindow对象

*需要起个服务,不要直接在本地打开

这是个只读属性,返回指定的iframe的window对象

拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};

为了监测网页高度是否因为点击了某个下拉按钮高度变化,我们建立一个定时器任务,这样一直监视着子网页的高度。

 setInterval(function () {
            setIframeHeight($('#iframe')[0])
        }, 200)

页面有可能同时存在多个iframe

$(".flexiframe").each(function (index) {//iframe公用类名:flexiframe
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

如果此时,你发现当子页面高度变高时,高度可以自适应的变高,但在变低时,会发现父页面的高度并没有向我们想象的随着子页面降低,导致底部留有大面积空白的问题,请继续往下看

3.文档声明的重要性

  • 将子页面的文档声明改为就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4.demo

父页面:a.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a</title>
</head>

<body style="background-color:red">
    <iframe id="iFrame" class="flexiframe" data-original="./b.html" style="padding: 0;width:100%;" marginwidth="0" frameborder="no" scrolling="no" height="2000px"></iframe>
    <!-- <iframe id="iFrame1" class="flexiframe" data-original="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <!-- <iframe id="iFrame2" class="flexiframe" data-original="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <script data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script data-original="./flexiframe.js"></script>
</body>

</html>

./flexiframe.js

// 使用前先将子页面文档声明改为
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};
$(".flexiframe").each(function (index) {
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

子页面b.html,分别注释两种声明方式,点击变大变小按钮看一下右侧滚动条的变化,(细节可以F12看一下iframe种的html和body跟div的高度关系)

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<div id="b_conntent">
        <div style="width:100px;background-color:blue">
                <div style="height:2000px">
                        <button id="btn">小</button>
                </div>
        </div>
</div>
<script data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
        $('#btn').on('click', function () {
                if ($(this).text() == '小') {
                        $(this).text('大').parent().css('height', '200px')
                } else {
                        $(this).text('小').parent().css('height', '2000px')
                }
        })
</script>

5.总结

1.有时间还是要了解下html的进化历史。
2.本文flexiframe.js可以直接使用,但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度,跨域的下次再说。
3.欢迎指出问题或留言加深本文的深度,例如html5已经不需要声明DTD,但是我解决这个问题不得不改一下DOCTYPE,退化到html4,为什么在html5中子页面html和body的高度不是由内部的内容决定的,而是等于父元素iframe的高度?

查看原文

公孙二狗 回答了问题 · 2018-04-19

JS 第一次加载不完整,自动再次加载导致问题出现

找到原因呢,第一次请求被运营商给劫持注入了

关注 2 回答 3

公孙二狗 提出了问题 · 2018-04-18

JS 第一次加载不完整,自动再次加载导致问题出现

图片描述
如图中 paper.js 第一个加载 477B,大小不对,然后接下来又加载了一次 paper.js,这次加载对了是 9K。仔细观察发现第二次 paper.js 加载的时候还在 URL 后面跟上了个时间戳的参数,我们的程序没有加过这个参数,就直接是 <script data-original="paper.js"></script> 这么引用的,因为出现第一次 paper.js 加载错误导致程序出错(即使第二次 paper.js 加载对了也没有用)。

这个问题在普通的网络条件下还没有发生过,例如我们的办公室,分公司的办公室,在家里等都没有发生过,但在学校的机房经常发生,由于学校的机房远在湖南,太远还不能过去,想用 QQ 远程连过去看看,但是 QQ 远程一直连接不成功。是不是学校的网络做了什么限制?

希望大家给看看!

关注 2 回答 3

公孙二狗 收藏了文章 · 2018-04-10

一次vue-cli 2.x项目打包优化经历(优化xlsx插件)

一、分析各模块打包后大小

用vue-cli创建的项目,已经集成 webpack-bundle-analyzer。
详见文件 build/webpack.prod.conf.js,代码如下:

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

运行npm run build --report后,会提示:

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

在该网址上可查看详细信息。

二、发现项目里打包后比较大的模块

发现xlsx(官方github地址:https://github.com/SheetJS/js...)打包后很大,因为在好多组件里都引用了 import XLSX from 'xlsx',每个组件都会包含这个xlsx。

三、优化

将引用放在 src/main.js 中,只引用一次,再绑定的Vue的prototype上。

import Vue from 'vue'
import XLSX from 'xlsx'
Vue.prototype.$XLSX = XLSX

其他组件里使用,直接调用this.$XLSX就可以了。

四、结论

一次引用,绑定到Vue的prototype上,在组件里使用。这样能避免组件每次都import,也避免组件打包后很大。

查看原文

公孙二狗 赞了文章 · 2018-04-10

一次vue-cli 2.x项目打包优化经历(优化xlsx插件)

一、分析各模块打包后大小

用vue-cli创建的项目,已经集成 webpack-bundle-analyzer。
详见文件 build/webpack.prod.conf.js,代码如下:

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

运行npm run build --report后,会提示:

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

在该网址上可查看详细信息。

二、发现项目里打包后比较大的模块

发现xlsx(官方github地址:https://github.com/SheetJS/js...)打包后很大,因为在好多组件里都引用了 import XLSX from 'xlsx',每个组件都会包含这个xlsx。

三、优化

将引用放在 src/main.js 中,只引用一次,再绑定的Vue的prototype上。

import Vue from 'vue'
import XLSX from 'xlsx'
Vue.prototype.$XLSX = XLSX

其他组件里使用,直接调用this.$XLSX就可以了。

四、结论

一次引用,绑定到Vue的prototype上,在组件里使用。这样能避免组件每次都import,也避免组件打包后很大。

查看原文

赞 5 收藏 4 评论 1

公孙二狗 收藏了文章 · 2018-04-10

提高安全性的最佳 Nginx 配置

由于安全问题一直是重中之重,这里整理下 nginx 的安全配置。文章大部分参考了 Best nginx configuration for improved security(and performance).Jerry Qu,更多关于 HTTP 安全及性能可前往 Jerry Qu 查看。

server_tokens

该响应头用于禁止 nginx 在响应中报文中包含版本信息。因为具体的版本可能会存在未知 bug

server_tokens off;

X-Frame-Options

该响应头用于是否允许浏览器加载 frameiframeobject 等属性。可以使用该功能来避免 点击劫持
add_header X-Frame-Options SAMEORIGIN;

该指令用三个可用的配置

当设置为 DENY 时,站点禁止任何页面被嵌入。

当设置为 SAMEORIGIN 时,只允许加载同源的 fram/iframe/object

当设置为 ALLOW-FROM 时,只允许加载指定的源。

X-Content-Type-Options

在我们通常的请求响应中,浏览器会根据 HTTP 响应的 Content-Type 来分辨响应的类型。如 text/html 代表 html 文档。 但当响应类型未指定或错误指定时,浏览会尝试启用 MIME-sniffing 来猜测资源的响应类型。

如通过精心制作一个图像文件,并在其中嵌入可以被浏览器所展示和执行的 HTMLJavaScript 代码。由于未关闭资源的类型猜测,浏览器将直接执行嵌入的 JavaScript 代码,而不是显示图片。
add_header X-Content-Type-Options nosniff;
用来指定浏览器对未指定或错误指定 Content-Type 资源真正类型的猜测行为,nosniff 表示不允许任何猜测。(Jerry Qu)

这个响应头的值只能是 nosniff,可用于 IE8+Chrome

X-XSS-Protection

add_header X-XSS-Protection "1; mode=block";

该响应头是用于防范及过滤 XSS 的。可用的几个指令如下:

  • X-XSS-Protection: 0
  • X-XSS-Protection: 1
  • X-XSS-Protection: 1; mode=block
  • X-XSS-Protection: 1; report=<reporting-uri>

说明

  • 0,禁用 XSS 过滤
  • 1,开启 XSS 过滤
  • 1; mode=block,开启 XSS 过滤,并且若检查到 XSS 攻击,停止渲染页面。
  • X-XSS-Protection: 1; report=<reporting-uri>,开启 XSS 过滤,并且若检查到 XSS 攻击,将使用指导的 url 来发送报告。

Content-Security-Policy

该响应头主要用于规定页面可以加载那些资源(css/js/img 等)。看一个简单的配置

# 定义所有资源文件的默认加载规则为self,表示允许
# 相同来源的内容(相同的协议、域名和端口)
add_header Content-Security-Policy: default-src 'self';

更多 Content-Security-Policy 的指令及规则及介绍可参考 Jerry QuContent Security Policy 介绍

Strict-Transport-Security

Strict-Transport-Security,简称 HSTS。该响应头用于标识浏览器用 HTTPS 替代 HTTP 的方式去访问目标站点。

我们知道 HTTPS 相对于 HTTP 有更好的安全性,而很多 HTTPS 网站,也可以通过 HTTP 来访问。开发人员的失误或者用户主动输入地址,都有可能导致用户以 HTTP 访问网站,降低了安全性。一般,我们会通过 Web Server 发送 301/302 重定向来解决这个问题。 (Jerry Qu)

我们可以使用下面方式启用 HSTH

add_header strict-transport-security: max-age=16070400; includeSubDomains;

当用户第一次访问后,将返回一个包含了 strict-transport-security 响应头的字段。他将告诉浏览器,在接下来的 16070400 秒内,当前网站的所有请求都强制使用 HTTPS 的方式访问。即使用户手动输入 http://,浏览器也会强制使用 HTTPS 方式访问。

参数 includeSubDomains 是可选的,当指定了该参数,所有子域名将采用同样的 HSTS 规则。

可以看到 HSTS 可以很好的解决 HTTPS 降级攻击,但是对于 HSTS 生效前的首次 HTTP 请求,依然无法避免被劫持。浏览器厂商们为了解决这个问题,提出了 HSTS Preload List 方案:内置一份可以定期更新的列表,对于列表中的域名,即使用户之前没有访问过,也会使用 HTTPS 协议。 (Jerry Qu)

如果你想把自己的域名加入这个列表,可通过 hstspreloa.org 查看是否满足申请条件。更多关于 HSTS 的配置,可查看 关于启用 HTTPS 的一些经验分享

目前 godruoyi.com 已成功加入 Preload List

查看原文

公孙二狗 回答了问题 · 2017-12-24

解决js怎么将 base64转换成图片?

后台没事找事,base64 的字符串转代码后台就是几行代码的事,故意不给转吧

关注 10 回答 6

认证与成就

  • 获得 89 次点赞
  • 获得 13 枚徽章 获得 0 枚金徽章, 获得 5 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-07
个人主页被 1.5k 人浏览