前言

今天主要讲讲JSONP的实现及内容安全策略CSP,JSONP跨域方案是很老的一种形式，我们用封装好的ajax基本都提供了这个功能，例如jquery的jsonp，请看之前文章：https://www.haorooms.com/post/jquery_ajax_wg ，及跨域解决方案之JSONP,都有提及，但是究竟怎么实现的，没有写，今天主要写一下JSONP的简单实现，及内容安全策略CSP，就是一个网站，可以设置运行访问的域名安全策略。

JSONP实现

JSONP的原理非常简单，就是HTML标签中，很多带src属性的标签都可以跨域请求内容，比如我们熟悉的img图片标签。同理，script标签也可以，利用script标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的，来执行跨域的javascript代码。

前言

网站性能优化，对于图片的处理，使图片采用webp格式，可以大大降低图片size，提高网站性能具有重要意义。但是webp格式有兼容问题，一般是判断浏览器是否支持webp，才采用webp格式。其实，页面种使用动态使用webp格式图片有很多方案，今天主要介绍的是采用Service Workers方案，关于Service Workers，我之前文章也有过介绍，HTML5之离线缓存的方法。主要是用pwa离线方案。本博客就采用Service Workers技术。

Service Workers加载webp图片

每个图片加载请求可以通过accept获取是否支持webp格式，例如如下图

前言

js复制文本到剪切板有很多方法，很多朋友会用开源库，其实纯js的方式实现也很简单。关于复制和剪切板，之前也写过很多文章，例如。 javascript execCommand,复文本框神器 记录一下js光标位置及复制和剪切板 文件上传之剪切板上传及大文件分片上传和断点续传

今天分享一下简单的copy方案。

navigator.clipboard.writeText 方案

这个方案不支持ie,比较简单

前言

在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。这就是本文说说的跨页面通信方案，那么目前有哪些跨页面的通信方案呢？本文重点介绍一下。

同源页面之间跨页面通信

同源页面之间跨页面通信一般有如下几种方案。

一、BroadCast Channel