前端笔记（1908-1911）

时间 2019-11-08

标签前端笔记繁體版

原文原文链接

一、CORS 跨域携带 Cookie 发送请求php

参考：http://www.javashuo.com/article/p-xhzqzyaw-x.htmlhtml

http://www.javashuo.com/article/p-qnsrriue-bv.html前端

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

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

若服务端将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'github

二、iframe sandbox属性web

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

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

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属性会致使跨站点脚本攻击。

三、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的属性就能够自动播放，而后再显示一个声音被关掉的按钮，提示用户点一下打开声音。

四、跨域请求

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

问题1：IE八、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

参考：http://www.javashuo.com/article/p-pdrqhfeq-cd.html

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

问题4：跨域cookie共享问题

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

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

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

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

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

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

扩展

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会话窗口）