今天在公司的后台项目中遇到一个这样的需求：点击一个按钮，发送一个请求，然后用请求到的data中的url打开一个新窗口（跳转到另一个后台）。看起来应该没什么问题，很快代码写好了（vue项目，以下是伪代码，主要表达下思路）：

1
2
3
4
5
6
7
8
9
10
11

clickHandle() {
  api.get('xxx', params).then(response => {
    let data = response.data;
    if(data.code === 0 ) {
      let url = data.data.url || '';
      if (url) {
        window.open(url);
      }
    }
  });
}

愉快地测试下，发现并没有弹出新窗口，短促的慌乱之后，发现是浏览器拦截了新窗口的打开。。。

搜索引擎告诉我，非用户行为导致的打开新窗口可能会被部分浏览器拦截（在谷歌浏览器中，它的表现形式是在地址栏的末尾有一个通知图标，点击通知可以选择允许还是继续拦截）。搜索引擎还说，可以用手动触发dom事件的方式模拟用户行为，避开浏览器的拦截。

有了上面的思路，我把伪代码修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

clickHandle() {
  api.get('xxx', params).then(response => {
    let data = response.data;
    if(data.code === 0 ) {
      let url = data.data.url || '';
      if (url) {
        // window.open(url);
        // 在dom中添加a标签-注册点击事件打开新窗口-触发点击事件-从dom中移除a标签
        let a = document.createElement('a');
        a.id = 'temp';
        document.body.appendChild(a);
        a.addEventListener('click', function(){
          window.open(url);
        });
        a.click();
        document.body.removeChild(a);
      }
    }
  });
}

很好，再次愉快地测试下，然而，浏览器还是拦截了。。。

笑容逐渐淫荡。笑容逐渐凝固。摔。

搜索引擎再次告诉我，只要是在异步回调里执行的window.open()都会被拦截。

好，整理下思路：这次我们不在异步回调里window.open()了。点击按钮先打开新窗口，把新窗口的引用保存在data里。请求拿到url后，把url也保存在data里。然后我们watch一下url,url有值了，就把新窗口的引用重定向。让我们祈祷这次别出什么幺蛾子。代码修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

export default {
  data() {
    return {
      url: '',
      newWin: null  // 新窗口的引用
    }
  },
  watch: {
    url(newVal, oldVal) {
      if(newVal && this.newWin) {
        this.newWin.location.href = newVal;
        // 重定向后把url和newWin重置
        this.url = '';
        this.newWin = null;
      }
    }
  },
  methods: {
    clickHandle() {
      let _this = this;
      // 先打开一个空的新窗口，再请求
      window.open();
      api.get('xxx', params).then(response => {
        let data = response.data;
        if(data.code === 0 ) {
          _this.url = data.data.url || '';
        }
      });
    }
  }
}

谨慎地测试一下，这次它打开了，它真的打开了。不能说很高兴吧，一般高兴。

然而下一秒，我发现我高兴早了：窗口是打开了，可是新窗口中的页面一直在加载动画的状态。我以前觉得这个加载动画挺好看的，就是一个缺了一块扇形的大圆不断地吃着一个个排成一线的小圆的动画，现在我觉得它吃的好像有点多了。

笑容逐渐变态。算了，不笑了。

这次没用搜索引擎，发现上面那个问题，是因为打开的新窗口会保留旧窗口的sessionStorage(至于为什么sessionStorage会阻止我那个新页面的加载就不在这篇文章的讨论范围之内了）。知道原因后，解决方法就简单了，在重定向之前，把新窗口的sessionStorage清空就好了。也就是在上面代码的这行代码this.newWin.location.href = newVal;之前加上一行this.newWin.sessionStorage.clear()就好了。代码就不放了。

这一次的测试没出什么问题。

总结

浏览器会拦截新窗口的打开也是为了保护用户体验，可以屏蔽一些广告。需要注意的是新窗口的引用newWin其实就是一个新的window对象,自然能使用上面的清除sessionStorage的方法。更多的关于window对象的知识，像是新窗口与打开它的窗口之间的通信等，可以在《Javascript高级程序设计》的第8章第1节中查阅学习。

在MDN上学习canvas相关API时，看到有个demo(下图)跟平时用的拾色器有点像。于是我想canvas能不能用来做拾色器呢？仔细想了一下，答案是可以的，并做了一个简单的demo（双击拾色）。在这里把思路简单记录一下。

最近在把公司电脑里的东西迁移到笔记本里的时候遇到了很多麻烦，hexo博客怎么迁移到新电脑中以及怎么在多端同步hexo博客就是其中之一。本文参考了知乎中的高票答案,把过程重新梳理了一遍，并在一些关键的地方做了更详细的阐述，自认为更好理解一点。

下拉刷新、上拉加载更多是移动端常见的交互效果，也有很多封装好的库供我们方便的调用。但是如果只是一个简单的临时页面，也许不用第三方库手写实现会是一个不错的选择。今天就来简单说说上拉加载更多的实现思路。

不是引言的引言

感觉引言好浪费时间，以后尽量不写引言了。

正文

localStorage是Html5新增的特性用来提供浏览器的本地存储功能。

引言

ES中有的对象长得很像数组，却又不是数组，比如函数中的arguments对象。如果我们想把这类对象转换为数组对象，就要用到我们今天要说的方法了。但是在这之前，需要先弄清楚几个概念：

• 类数组对象
• arguments
• 数组的slice方法
• call和apply

写在前面

函数表达式这一章，看到闭包，又卡壳了，懵逼了。。。去看了《你不知道的JavaScript》，查了资料，感觉稍微理解了一点，但是这个概念对我来说还是不清晰啊。。。我能怎么办，我也对自己的智商很无奈啊。。。算了，先搞简单的吧。操作符够简单了吧，但是递增递减操作符我还真就容易出错，今天看的时候还出错了。。。所以只能说还是没有完全理解，我觉得一件事只有自己能表述清楚了才是真的理解了。本着这个原则，虽然是基础简单的东西，但既然自己这么容易出错，就记录一下吧。以后有这些小的知识点容易错、记不住的也都记录一下吧，不能眼高手低。今天碎碎念的废话有点多啊~

函数表达式

定义函数有两种方式：函数声明和函数表达式。

函数声明

Firefox、Safari、Chrome、Opera支持函数的非标准属性name，这个属性的值总等于function关键字后面的标识符。

函数声明的一个重要特征就是函数声明提升。

1
2
3
4

sayHi();  //没毛病，妥妥的
function sayHi(){
  console.log('Hi!');
}

概要

面向对象的语言中大多支持两种继承方式：接口继承和实现继承。接口继承是继承方法签名，实现继承是继承是继承实际的方法。由于js的函数没有签名，所以只支持实现继承，而且实现继承主要是依靠原型链来实现。

前言

以前一直不知道css3的背景渐变有什么用，感觉w3school里的示例好丑的说。最近在看animate.css发现这里的文字不但有渐变，而且颜色是随时间改变的，很有高大上的感觉（如下图）。于是就研究了一番，并用在了自己博客的logo上（PS:效果并不好，跟NexT的黑色主题不太搭）。