前端笔记（1908-1911）

1、CORS 跨域携带 Cookie 发送请求

参考：https://segmentfault.com/a/1190000016032594

https://www.cnblogs.com/nuccch/p/7875189.html

需要从2个方面解决：
1）服务器端使用CROS协议解决跨域访问数据问题时，需要设置响应消息头Access-Control-Allow-Credentials值为“true”。同时，还需要设置响应消息头Access-Control-Allow-Origin值为指定单一域名（注：不能为通配符“*”）。

2）客户端需要设置Ajax请求属性withCredentials=true，让Ajax请求都带上Cookie。

若服务端将Access-Control-Allow-Origin设置为*，浏览器会报错The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

2、iframe sandbox属性

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

https://www.w3school.com.cn/tags/att_iframe_sandbox.asp

sandbox该属性对呈现在iframe框架中的内容启用一些额外的限制条件。

<iframe src="xxx.html" sandbox="allow-top-navigation allow-popups allow-forms allow-same-origin allow-scripts"></iframe>

 问题：使用了sandbox属性iframe窗口无法跳转，去掉sandbox属性即可解决。报错如下：

解决方案：window.postMessage通信

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

 window.postMessage() 方法可以安全地实现跨源通信。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

// 发送消息
window.parent.postMessage(surl, location.origin);
//接收消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e){
    if (e.origin !== location.origin) {
        return;
    }
    location.href = e.data;
}

安全问题：如果您确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。 任何窗口（包括例如http://evil.example.com）都可以向任何其他窗口发送消息，并且您不能保证未知发件人不会发送恶意消息。 但是，验证身份后，您仍然应该始终验证接收到的消息的语法。 否则，您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。 恶意网站可以在您不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。任何窗口可以在任何其他窗口访问此方法，在任何时间，无论文档在窗口中的位置，向其发送消息。 因此，用于接收消息的任何事件监听器必须首先使用origin和source属性来检查消息的发送者的身份。 这不能低估：无法检查origin和source属性会导致跨站点脚本攻击。

3、video

 参考：http://www.942ss.com/?p=1155

https://segmentfault.com/a/1190000020073391?utm_source=tag-newest

问题1：video点击暂停播放之后，图像暂停，声音还在播放的情况。

解决方案：不要使用video自带的播放属性autoplay，用js写一个播放即可解决问题

$('.prd-detail-top').prepend('<video class="detail-video" controls="controls" src="' + prdDetail.videos_url + '">您的浏览器不支持 video 标签。</video>');
$('.detail-video')[0].play();

在谷歌浏览器中会报错：

问题2：video标签自动播放问题

参考：https://www.jianshu.com/p/06179ca12dfa

Chrome在66版本后为了避免标签产生随机噪音，在18年4月做了更改，浏览器为了提高用户体验，减少数据消耗，现在都在遵循autoplay政策。Chrome的文档给了一个最佳实践：先把音视频加一个muted的属性就可以自动播放，然后再显示一个声音被关掉的按钮，提示用户点一下打开声音。

4、跨域请求

参考：https://caniuse.com/#search=cors

问题1：IE8、IE9不支持CORS跨域

解决方案：jQuery与插件 jQuery-ajaxTransport-XDomainRequest 相互配合就可以部分解决兼容性问题（XDomainRequest 对象），对于get请求非常简单，只需要引入该插件，接口协议与页面要一致（都是http或https）。

问题2：CORS跨域使用XDomainRequest 对象兼容ie8和ie9有限制，请求的时候cookie不能送到服务端

解决方案：使用jsonp（get请求）

jsonp（jquery ajax）与缓存

参考：https://www.w3school.com.cn/jquery/ajax_ajax.asp

  

 cache为false时ajax请求会自动带上时间戳如account/ajaxSign?st_callback=handleResponse&_=1573012287871

问题3：jQuery连续发起jsonp请求失败，只有一个请求会成功，后面的并发请求会报错：Uncaught TypeError: xxx is not a function

 参考：https://www.cnblogs.com/lenghan/p/5777588.html

解决方案：并发请求送不同的jsonpCallback参数（适用于并发请求不多的场合）。指定jsonpCallback参数是为了缓存请求，节省cdn带宽

问题4：跨域cookie共享问题

跨域cookie共享问题是在win7环境下的原生ie浏览器（ie8、ie9）发现的，查看浏览器隐私设置，发现默认设置如图，这样会导致请求无法携带cookie。

解决方案：页面和请求接口顶级域名相同时，服务端设置domain为顶级域名，如页面域名为www.a.com，接口域名为api.a.com，服务端设置domain为‘a.com’即可。这样前端在发跨域请求时（cors或jsonp）就能将cookie发送给服务端。

5、IE 兼容性标记 X-UA-Compatible

参考：https://jingyan.baidu.com/article/bea41d43a40910b4c51be60a.html

我参与的一个项目需要兼容ie8，开始未设置X-UA-Compatible，ie浏览器默认可能会使用其他的文本模式如IE7标准来渲染页面，此时就会导致一些兼容问题。

 X-UA-Compatible 属性是 IE 浏览器在 IE8 版本开始提供的一个特性，允许开发者通过设置 meta 标记来规定 IE 浏览器在解析网页时使用的文档模式。

 <meta http-equiv="X-UA-Compatible" content="IE=Edge">：IE浏览器将总是使用最新版本的文档模式，如用 IE8 访问就是 IE8 文档模式，用 IE9 访问就是 IE9 模式，用 IE10 访问就是 IE10 模式，用 IE11 访问就是 IE11 模式。

pc客户端调试

问题：web页面在pc客户端的兼容

定位问题：使用Fiddler（一个http协议调试代理工具）抓包。

项目背景：pc客户端嵌入的web页面运行在ie内核，客户端同学说不能在端里打开控制台调试js。web页面在浏览器运行没问题，通过alert大概定位问题在ajax请求（给a链接绑定的click事件，点击a链接会发ajax请求）。

 解决方案：在click事件方法后面加了个return false;

$('.top-box .order-link').click(function() {
    // ...
    return false;
});

 原理：不确定，return false阻止冒泡和默认事件？

扩展

1）pv、uv

　　pv是page view的缩写，即页面浏览量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。网页浏览数是评价网站流量最常用的指标之一，简称为PV。监测网站PV的变化趋势和分析其变化原因是很多站长定期要做的工作。 Page Views中的Page一般是指普通的html网页，也包含php、jsp等动态产生的html内容。来自浏览器的一次html内容请求会被看作一个PV，逐渐累计成为PV总数。

　　UV(独立访客)即Unique Visitor，独立访客是指某站点被多少台电脑访问过，以用户电脑的Cookie作为统计依据。00:00-24:00内相同的客户端只被计算一次。

　　IP(独立IP)　即Internet Protocol，独立IP是指访问过某站点的IP总数，以用户的IP地址作为统计依据。00:00-24:00内相同IP地址只被计算一次。

　　对于ADSL上网的用户：一个用户有可能在一天之内多次重复访问某站点，如果他在同一台电脑上，并且IP没有变化的情况下，那么这个用户为该站点贡献了一个独立IP数，一个独立访客数，而PV则是随着他的浏览在不断增加；如果他在中途在不改变电脑的情况下，掉线了一次，重新连上后IP发生了变化，之后他又访问了该站点，那么这个用户为该站点贡献了两个IP数，一个独立访客数。对于网吧、单位、学校上网的用户：这些场所一般都是采用局域网共享上网的方式，只有一个IP地址接入互联网，此种情况就有可能出现独立访客数大于独立IP数，比如某单位内有多人访问A站点，但是整个单位的公网IP出口就只有一个，那么无论该单位里在当日有多少人次访问A站点，这些用户为A站点贡献的独立IP数为1，除非该单位的IP地址发生了变化，相反，这些用户为A站点带来的独立访客数就是该单位内当日访问A站点的实际人数了。由此可见，独立访客比独立IP更具说服力，只不过我们平时比较关心独立IP罢了。一个网站的独立IP数与独立访客数是相近的，有可能独立IP数>独立访客数，也有可能独立IP数<独立访客数，当然也有可能是相等的，这取决于网站的用户访问情况。而PV则是永远都是大于等于独立IP和独立访客的，因为PV是重复统计的。

• PV(访问量)　

　　PV高不一定代表来访者多；PV与来访者的数量成正比，但是PV并不直接决定页面的真实来访者数量。比如一个网站就你一个人进来，通过不断的刷新页面，也可以制造出非常高的PV。

• UV(独立访客)

　　UV是指不同的、通过互联网访问、浏览一个网页的自然人。比如，在一台电脑上，哥哥打开了微软的官方主页，注册了一个会员。弟弟一会儿也看了看，注册了另一个会员。由于兄弟两个使用的是相同的计算机，那么他们的 IP是一样的，微软的官方计数器记录到一个IP登陆的信息。但是，具有统计功能的统计系统，可以根据其他条件判断出实际使用的用户数量，返回给网站建设者真实、可信和准确的信息。比如通过注册的用户，甚至可以区分出网吧、机房等共享一个IP地址的不同计算机。上面的例子就说明虽然是同一IP，但是有2个独立访客。再举个例子吧，比如一个网吧里，有100个人都进入了我的网站，但是一个网吧对外都是一个IP的，所以统计系统只统计到一个IP；但是因为网吧里有100人在访问我的站，尽管他们都仅仅打开我的网站的首页，或者这100人都把我网站所有页面都看过了一遍，统计系统都只统计到100个独立访客。

• IP(独立IP)

　　表示拥有特定唯一IP地址的计算机访问您的网站的次数，因为这种统计方式比较容易实现，具有较高的真实性，所以成为大多数机构衡量网站流量的重要指标。比如你是ADSL拨号上网的，你拨一次号都自动分配一个IP，这样你进入了本站，那就算一个IP，当你断线了而没清理Cookies，之后又拨了一次号，又自动分配到一个IP，你再进来了本站，那么又统计到一个IP，这时统计数据里IP就显示统计了2次。但是UV（独立访客）没有变，因为2次都是你进入了本站。

2）80端口

　　80端口是为HTTP（HyperText Transport Protocol)即超文本传输协议开放的，此为上网冲浪使用次数最多的协议，主要用于WWW（World Wide Web）即万维网传输信息的协议。可以通过HTTP地址（即常说的“网址”）加“: 80”来访问网站，因为浏览网页服务默认的端口号都是80，因此只需输入网址即可，不用输入“: 80”了。

3）从浏览器唤起QQ进行聊天，是很多公司或者企业会用到的一种客服方式，然而很多时候，一些手机端浏览器并不支持直接跳转到QQ，或者不支持从App内嵌的网页中跳转到QQ页面。

在小程序里使用web-view 组件承载网页客服链接（企点）需要使用网页接待（匿名聊天），而不要使用QQ接待方式（使用该方式不能调起qq会话窗口）