首页问答专栏课程
公孙二狗

公孙二狗 查看完整档案

1053声望
填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有
加关注 发私信
关注了0 人
粉丝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

查看原文

赞 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

该响应头用于是否允许浏览器加载 frame、 iframe、 object 等属性。可以使用该功能来避免 点击劫持
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 来猜测资源的响应类型。

如通过精心制作一个图像文件，并在其中嵌入可以被浏览器所展示和执行的 HTML 和 JavaScript 代码。由于未关闭资源的类型猜测，浏览器将直接执行嵌入的 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 Qu 的 Content 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 人浏览