工作 – 第 9 页 – 程序猿&程序媛

实现符合 HTTP access control (CORS) 规范的跨域请求配置

// jQuery 示例：
$.ajax({
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  },
  url: 'http://other.domain/api.json'
});

// jQuery 示例：

$.ajax({

crossDomain: true,

xhrFields: {

withCredentials: true

url: 'http://other.domain/api.json'

});

其中 crossDomain: true 属性，可禁止添加 X-Requested-With: XMLHttpRequest 自定义请求头。默认情况下，对于非跨域请求会添加，对于跨域请求不添加。
其中 withCredentials: true 属性，可控制 XMLHttpRequest 对象，携带 other.domain 域下的凭证信息（如 Cookie 等）。
对于简单请求，会直接发送指定类型的请求。对于预请求，会先发出一个 OPTIONS 请求，得到成功回应后才发送指定类型的请求。

// Java 示例：
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin") == null ? "*" : request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method"));
response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
response.setHeader("Access-Control-Allow-Credentials", "true");

// Java 示例：

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin") == null ? "*" : request.getHeader("Origin"));

response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method"));

response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));

response.setHeader("Access-Control-Allow-Credentials", "true");

根据前端提供的请求头，后端返回对应的响应头。对于 OPTIONS 请求，注意不要执行业务代码。
对于前端未授权的同步（如访问 html 页面）请求，后端可直接 302 跳转至登录页。对于前端未授权的异步（如 json 接口）请求，后端应仍然输出 json 结构响应，可在该结构中定义代表需要登录的状态码。
对于异步请求的检查，建议使用请求后缀（如 json 后缀）检查。不建议使用请求头（如 X-Requested-With 自定义头）检查，因为对于预请求，是不会携带该自定义头的。

IOS10下Safari中的页面，其viewport配置user-scalable=no无效。

IOS10发布后，苹果为了“用户体验”，在Safari中忽略了user-scalable=no配置，但在WebView中仍默认启用。
为了“邪恶的阻止用户得到更好体验”，只能通过脚本方式在Safari中禁用缩放了。

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1)event.preventDefault();
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300)event.preventDefault();
    lastTouchEnd = now;
}, false);

document.documentElement.addEventListener('touchstart', function (event) {

if (event.touches.length > 1)event.preventDefault();

}, false);

var lastTouchEnd = 0;

document.documentElement.addEventListener('touchend', function (event) {

var now = (new Date()).getTime();

if (now - lastTouchEnd <= 300)event.preventDefault();

lastTouchEnd = now;

}, false);

参考资料：
iOS SDK Release Notes for iOS 10.0
ignoresViewportScaleLimits

异步跨域 cookie 在 IOS 和 Andriod 的 Safari 或 WebView 中无法写入

跨域配置：
当入口页面与后端接口没有部署在同域（协议/域名(IP)/端口）时，需要进行跨域配置。
简单请求时，不能携带跨域凭证信息（如 cookie ），只需要后端接口返回 Access-Control-Allow-Origin:* 协议头即可。
预请求时，可携带跨域凭证信息（如 cookie ），但需要前端异步请求设置 withCredentials=true 标志，后端接口返回 Access-Control-Allow-Credentials:true 和 Access-Control-Allow-Origin:http://example 协议头，不能使用 * 占位符。
以上配置在标准浏览器实现中可正常使用，如 Andriod 6.0 平台的 Chrome 或系统自带浏览器都没问题。但 Andriod 6.0 平台的 WebView 以及 IOS 10 平台的 Safari 浏览器和 WebView 在使用“预请求”模式时，无法写入跨域 cookie 。
查询资料后发现是第三方 cookie 的隐私策略造成。 Android 5.0 之后，对于 WebView 需调用 setAcceptThirdPartyCookies 方法， IOS 7.0 之后，对于 WebView 需设置 setCookieAcceptPolicy 配置，允许第三方 cookie 存储。
变通的解决方案是，用户访问后端域下的中转页，中转页写入（非 Session 级别？） cookie 并（302/meta/js）跳转至前端域下的入口页面，此时入口页面即可正常使用“预请求”模式。
注意 Safari 开发人员工具中记录的 request 通讯，似乎并未正确显示应携带的跨域 cookie 数据，但后端确实接收到了该数据。

参考：
HTTP访问控制(CORS)
苹果手机IOS全版本safari浏览器和Android 6.0 Webview 跨域请求(CORS)时，不带cookies问题
 Android 5.0 行为变更
 Cookies and Custom Protocols
第一方Cookie和第三方Cookie区别
 关于p3p简洁策略,以及浏览器的支持情况.
记一次iphone 微信内置浏览器跨域无法获取cookie问题的解决方法
 safari浏览器cookie问题

Chrome在Mac和Windows下，对中国标准时间（CST）和中国夏令时(CDT)的不同处理。

通过接口从后端获取时间戳，在前端用JS格式化显示。发现Chrome在Mac和Windows下，对特定的时间段（1986年至1991年），的处理方式并不相同。

//Mac下的Chrome浏览器
new Date(640450800000)
Thu Apr 19 1990 00:00:00 GMT+0900 (CDT)
new Date()
Mon Jul 04 2016 12:00:00 GMT+0800 (CST)
new Date(1467561600000)
Mon Jul 04 2016 00:00:00 GMT+0800 (CST)

//Windows下的Chrome浏览器
new Date(640450800000)
Wed Apr 18 1990 23:00:00 GMT+0800 (中国标准时间)
new Date()
Mon Jul 04 2016 12:00:00 GMT+0800 (中国标准时间)
new Date(1467561600000)
Mon Jul 04 2016 00:00:00 GMT+0800 (中国标准时间)

//Mac下的Chrome浏览器

new Date(640450800000)

Thu Apr 19 1990 00:00:00 GMT+0900 (CDT)

new Date()

Mon Jul 04 2016 12:00:00 GMT+0800 (CST)

new Date(1467561600000)

Mon Jul 04 2016 00:00:00 GMT+0800 (CST)

//Windows下的Chrome浏览器

new Date(640450800000)

Wed Apr 18 1990 23:00:00 GMT+0800 (中国标准时间)

new Date()

Mon Jul 04 2016 12:00:00 GMT+0800 (中国标准时间)

new Date(1467561600000)

Mon Jul 04 2016 00:00:00 GMT+0800 (中国标准时间)

查询资料后发现，原来中国也曾经使用过夏令时。

1986年至1991年，中华人民共和国在全国范围实行了六年夏令时，每年从4月中旬的第一个星期日2时整（北京时间）到9月中旬第一个星期日的凌晨2时整（北京夏令时）。除1986
年因是实行夏令时的第一年，从5月4日开始到9月14日结束外，其它年份均按规定的时段施行。1992年4月5日后不再实行。

要避免此情况可在后端对时间进行处理，返回格式化后的日期字符串。

TimeZone.setDefault(TimeZone.getTimeZone("GMT+8:00"));

1	TimeZone.setDefault(TimeZone.getTimeZone("GMT+8:00"));

或在前端通过getTimezoneOffset检测夏令时，尝试网上找到的夏令时检测算法。

<!DOCTYPE html>
<html>
    <head>
    <title>DST Calculator</title>
    <script type="text/javascript">

    function DisplayDstSwitchDates()
    {
        var year = new Date().getYear();
        if (year < 1000)
            year += 1900;

        var firstSwitch = 0;
        var secondSwitch = 0;
        var lastOffset = 99;

        // Loop through every month of the current year
        for (i = 0; i < 12; i++)
        {
            // Fetch the timezone value for the month
            var newDate = new Date(Date.UTC(year, i, 0, 0, 0, 0, 0));
            var tz = -1 * newDate.getTimezoneOffset() / 60;

            // Capture when a timzezone change occurs
            if (tz > lastOffset)
                firstSwitch = i-1;
            else if (tz < lastOffset)
                secondSwitch = i-1;

            lastOffset = tz;
        }

        // Go figure out date/time occurences a minute before
        // a DST adjustment occurs
        var secondDstDate = FindDstSwitchDate(year, secondSwitch);
        var firstDstDate = FindDstSwitchDate(year, firstSwitch);

        if (firstDstDate == null && secondDstDate == null)
            return 'Daylight Savings is not observed in your timezone.';
        else
            return 'Last minute before DST change occurs in ' +
               year + ': ' + firstDstDate + ' and ' + secondDstDate;
    }

    function FindDstSwitchDate(year, month)
    {
        // Set the starting date
        var baseDate = new Date(Date.UTC(year, month, 0, 0, 0, 0, 0));
        var changeDay = 0;
        var changeMinute = -1;
        var baseOffset = -1 * baseDate.getTimezoneOffset() / 60;
        var dstDate;

        // Loop to find the exact day a timezone adjust occurs
        for (day = 0; day < 50; day++)
        {
            var tmpDate = new Date(Date.UTC(year, month, day, 0, 0, 0, 0));
            var tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;

            // Check if the timezone changed from one day to the next
            if (tmpOffset != baseOffset)
            {
                var minutes = 0;
                changeDay = day;

                // Back-up one day and grap the offset
                tmpDate = new Date(Date.UTC(year, month, day-1, 0, 0, 0, 0));
                tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;

                // Count the minutes until a timezone chnage occurs
                while (changeMinute == -1)
                {
                    tmpDate = new Date(Date.UTC(year, month, day-1, 0, minutes, 0, 0));
                    tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;

                    // Determine the exact minute a timezone change
                    // occurs
                    if (tmpOffset != baseOffset)
                    {
                        // Back-up a minute to get the date/time just
                        // before a timezone change occurs
                        tmpOffset = new Date(Date.UTC(year, month,
                                             day-1, 0, minutes-1, 0, 0));
                        changeMinute = minutes;
                        break;
                    }
                    else
                        minutes++;
                }

                // Add a month (for display) since JavaScript counts
                // months from 0 to 11
                dstDate = tmpOffset.getMonth() + 1;

                // Pad the month as needed
                if (dstDate < 10) dstDate = "0" + dstDate;

                // Add the day and year
                dstDate += '/' + tmpOffset.getDate() + '/' + year + ' ';
 
                // Capture the time stamp
                tmpDate = new Date(Date.UTC(year, month,
                                   day-1, 0, minutes-1, 0, 0));
                dstDate += tmpDate.toTimeString().split(' ')[0];
                return dstDate;
            }
        }
    }

    </script>
    </head>
    <body>
        <script type="text/javascript">
            document.write("Current date/time: " + new Date() + "<br />");
            document.write(DisplayDstSwitchDates());
        </script>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<html>

<head>

<title>DST Calculator</title>

function DisplayDstSwitchDates()

{

var year = new Date().getYear();

if (year < 1000)

year += 1900;

var firstSwitch = 0;

var secondSwitch = 0;

var lastOffset = 99;

// Loop through every month of the current year

for (i = 0; i < 12; i++)

{

// Fetch the timezone value for the month

var newDate = new Date(Date.UTC(year, i, 0, 0, 0, 0, 0));

var tz = -1 * newDate.getTimezoneOffset() / 60;

// Capture when a timzezone change occurs

if (tz > lastOffset)

firstSwitch = i-1;

else if (tz < lastOffset)

secondSwitch = i-1;

lastOffset = tz;

}

// Go figure out date/time occurences a minute before

// a DST adjustment occurs

var secondDstDate = FindDstSwitchDate(year, secondSwitch);

var firstDstDate = FindDstSwitchDate(year, firstSwitch);

if (firstDstDate == null && secondDstDate == null)

return 'Daylight Savings is not observed in your timezone.';

else

return 'Last minute before DST change occurs in ' +

year + ': ' + firstDstDate + ' and ' + secondDstDate;

}

function FindDstSwitchDate(year, month)

{

// Set the starting date

var baseDate = new Date(Date.UTC(year, month, 0, 0, 0, 0, 0));

var changeDay = 0;

var changeMinute = -1;

var baseOffset = -1 * baseDate.getTimezoneOffset() / 60;

var dstDate;

// Loop to find the exact day a timezone adjust occurs

for (day = 0; day < 50; day++)

{

var tmpDate = new Date(Date.UTC(year, month, day, 0, 0, 0, 0));

var tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;

// Check if the timezone changed from one day to the next

if (tmpOffset != baseOffset)

{

var minutes = 0;

changeDay = day;

// Back-up one day and grap the offset

tmpDate = new Date(Date.UTC(year, month, day-1, 0, 0, 0, 0));

tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;

// Count the minutes until a timezone chnage occurs

while (changeMinute == -1)

{

tmpDate = new Date(Date.UTC(year, month, day-1, 0, minutes, 0, 0));

tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;

// Determine the exact minute a timezone change

// occurs

if (tmpOffset != baseOffset)

{

// Back-up a minute to get the date/time just

// before a timezone change occurs

tmpOffset = new Date(Date.UTC(year, month,

day-1, 0, minutes-1, 0, 0));

changeMinute = minutes;

break;

}

else

minutes++;

}

// Add a month (for display) since JavaScript counts

// months from 0 to 11

dstDate = tmpOffset.getMonth() + 1;

// Pad the month as needed

if (dstDate < 10) dstDate = "0" + dstDate;

// Add the day and year

dstDate += '/' + tmpOffset.getDate() + '/' + year + ' ';

// Capture the time stamp

tmpDate = new Date(Date.UTC(year, month,

day-1, 0, minutes-1, 0, 0));

dstDate += tmpDate.toTimeString().split(' ')[0];

return dstDate;

}

</script>

</head>

<body>

document.write("Current date/time: " + new Date() + "<br />");

document.write(DisplayDstSwitchDates());

</script>

</body>

</html>

参考资料：
时间是什么？
java中的时区陷阱
 Java —— 时区（夏令时）问题
 CST和GMT时间的区别
 使用 JavaScript 处理夏令时
 js获得当前时区夏令时发生和终止的时间
 List of time zone abbreviations
tz database
Daylight saving time
Time in China
Time zone
ISO 8601

DOM级别事件捕获事件冒泡阻断事件传播阻止默认行为自定义事件

事件处理兼容性函数

var EventUtil = {
  addHandler: function(element, type, handler){
    if (element.addEventListener){
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent){
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  removeHandler: function(element, type, handler){
    if (element.removeEventListener){
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent){
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  getEvent: function(event){
    return event ? event : window.event;
  },
  getTarget: function(event){
    return event.target || event.srcElement;
  },
  preventDefault: function(event){
    if (event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event){
    if (event.stopPropagation){
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
};

var EventUtil = {

addHandler: function(element, type, handler){

if (element.addEventListener){

element.addEventListener(type, handler, false);

} else if (element.attachEvent){

element.attachEvent("on" + type, handler);

} else {

element["on" + type] = handler;

}

removeHandler: function(element, type, handler){

if (element.removeEventListener){

element.removeEventListener(type, handler, false);

} else if (element.detachEvent){

element.detachEvent("on" + type, handler);

} else {

element["on" + type] = null;

}

getEvent: function(event){

return event ? event : window.event;

getTarget: function(event){

return event.target || event.srcElement;

preventDefault: function(event){

if (event.preventDefault){

event.preventDefault();

} else {

event.returnValue = false;

}

stopPropagation: function(event){

if (event.stopPropagation){

event.stopPropagation();

} else {

event.cancelBubble = true;

}

};

EventTarget
Legacy Platform Events
理解JavaScript中的事件处理
 关于DOM级别的一些问题

自定义事件

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

// Create the event.

var event = document.createEvent('Event');

// Define that the event name is 'build'.

event.initEvent('build', true, true);

// Listen for the event.

elem.addEventListener('build', function (e) {

// e.target matches elem

}, false);

// target can be any Element or other EventTarget.

elem.dispatchEvent(event);

Document.createEvent()
CustomEvent
创建和触发 events
javascript自定义事件(event)

jQuery事件核心

咋一看其实原理都挺简单的， 但是jQuery为了实现兼容统一，可谓煞费苦心了，把事件冒泡与捕获都统一模拟了一遍

1. jQuery为统一原生Event对象而封装的jQuery.Event类，封装了preventDefault，stopPropagation,stopImmediatePropagation原生接口，可以直接捕获到用户的行为
2. 由核心组件 jQuery.cache 实现注册事件处理程序的存储，实际上绑定在 DOM元素上的事件处理程序只有一个，即 jQuery.cache[elem[expando]].handle 中存储的函数，该函数在内部调用 jQuery.event.dispatch(event) 实现对该DOM元素特定事件的缓存的访问，并依次执行这些事件处理程序。
3. jQuery.event.add(elem, types, handler, data, selector) 方法用于给特定elem元素添加特定的事件 types([type.namespace, type.namespace, ...])的事件处理程序 handler, 通过第四个参数 data 增强执行当前 handler 事件处理程序时的 $event.data 属性，以提供更灵活的数据通讯，而第五个元素用于指定基于选择器的委托事件
4. namespace 命名空间机制，namespace 机制可以对事件进行更为精细的控制，开发人员可以指定特定空间的事件，删除特定命名空间的事件，以及触发特定命名空间的事件。这使得对事件处理机制的功能更加健
5. jQuert.event.special 对象用于某些事件类型的特殊行为和属性。比如 load 事件拥有特殊的 noBubble 属性，可以防止该事件的冒泡而引发一些错误。总的来说，有这样一些方法和属性：
6. jQuery.event.simulate(type, elem, event, bubble)模拟事件并立刻触发方法，可用于在DOM元素 elem 上模拟自定义事件类型 type，参数 bubble用于指定该事件是否可冒泡，event 参数表示 jQuery 事件对象 $event。 模拟事件通过事件对象的isSimulated属性为 true 表示这是模拟事件。该方法内部调用 trigger() 逻辑 或 dispatch() 逻辑立刻触发该模拟事件。该方法主要用于修正浏览器事件的兼容性问题，比如模拟出可冒泡的 focusin/ focusout 事件，修正IE中 change 事件的不可冒泡问题，修正IE中 submit事件不可冒泡问题
7. jQuery.event.dispatch(event) 方法在处理事件委托机制时，依赖委托节点在DOM树的深度安排优先级，委托的DOM节点层次越深，其执行优先级越高。而其对于stopPropagation的处理有些特殊，在事件委托情况下并不一定会调用绑定在该DOM元素上的该类型的所有事件处理程序，而依赖于委托的事件处理程序的执行结果，如果低层委托的事件处理程序声明了停止冒泡，那么高层委托的事件以及自身绑定事件就不会被执行，这拓展了 DOM 委托机制的功能。
8. jQuery.event.trigger(event | type, data, elem, onlyHandlers) 方法提供开发人员以程序方式触发特定事件的接口，该方法的第一个参数可以是 $event/ event 对象 ，也可以是某个事件类型的字符串 type； 第二个参数 data 用于扩展该事件触发时事件处理程序的参数规模，用于传递一些必要的信息。 elem参数表示触发该事件的DOM元素；最后该方法在默认情况下，其事件会冒泡，并且在有默认动作的情况下执行默认行为，但是如果指定了 onlyHandlers 参数，该方法只会触发绑定在该DOM元素上的事件处理程序，而不会引发冒泡和默认动作，也不会触发特殊的 trigger 行为。
9. …………………

咋一看其实原理都挺简单的，但是jQuery为了实现兼容统一，可谓煞费苦心了，把事件冒泡与捕获都统一模拟了一遍

1. jQuery为统一原生Event对象而封装的jQuery.Event类，封装了preventDefault，stopPropagation,stopImmediatePropagation原生接口，可以直接捕获到用户的行为

2. 由核心组件 jQuery.cache 实现注册事件处理程序的存储，实际上绑定在 DOM元素上的事件处理程序只有一个，即 jQuery.cache[elem[expando]].handle 中存储的函数，该函数在内部调用 jQuery.event.dispatch(event) 实现对该DOM元素特定事件的缓存的访问，并依次执行这些事件处理程序。

3. jQuery.event.add(elem, types, handler, data, selector) 方法用于给特定elem元素添加特定的事件 types([type.namespace, type.namespace, ...])的事件处理程序 handler, 通过第四个参数 data 增强执行当前 handler 事件处理程序时的 $event.data 属性，以提供更灵活的数据通讯，而第五个元素用于指定基于选择器的委托事件

4. namespace 命名空间机制，namespace 机制可以对事件进行更为精细的控制，开发人员可以指定特定空间的事件，删除特定命名空间的事件，以及触发特定命名空间的事件。这使得对事件处理机制的功能更加健

5. jQuert.event.special 对象用于某些事件类型的特殊行为和属性。比如 load 事件拥有特殊的 noBubble 属性，可以防止该事件的冒泡而引发一些错误。总的来说，有这样一些方法和属性：

6. jQuery.event.simulate(type, elem, event, bubble)模拟事件并立刻触发方法，可用于在DOM元素 elem 上模拟自定义事件类型 type，参数 bubble用于指定该事件是否可冒泡，event 参数表示 jQuery 事件对象 $event。模拟事件通过事件对象的isSimulated属性为 true 表示这是模拟事件。该方法内部调用 trigger() 逻辑或 dispatch() 逻辑立刻触发该模拟事件。该方法主要用于修正浏览器事件的兼容性问题，比如模拟出可冒泡的 focusin/ focusout 事件，修正IE中 change 事件的不可冒泡问题，修正IE中 submit事件不可冒泡问题

7. jQuery.event.dispatch(event) 方法在处理事件委托机制时，依赖委托节点在DOM树的深度安排优先级，委托的DOM节点层次越深，其执行优先级越高。而其对于stopPropagation的处理有些特殊，在事件委托情况下并不一定会调用绑定在该DOM元素上的该类型的所有事件处理程序，而依赖于委托的事件处理程序的执行结果，如果低层委托的事件处理程序声明了停止冒泡，那么高层委托的事件以及自身绑定事件就不会被执行，这拓展了 DOM 委托机制的功能。

8. jQuery.event.trigger(event | type, data, elem, onlyHandlers) 方法提供开发人员以程序方式触发特定事件的接口，该方法的第一个参数可以是 $event/ event 对象，也可以是某个事件类型的字符串 type；第二个参数 data 用于扩展该事件触发时事件处理程序的参数规模，用于传递一些必要的信息。 elem参数表示触发该事件的DOM元素；最后该方法在默认情况下，其事件会冒泡，并且在有默认动作的情况下执行默认行为，但是如果指定了 onlyHandlers 参数，该方法只会触发绑定在该DOM元素上的事件处理程序，而不会引发冒泡和默认动作，也不会触发特殊的 trigger 行为。

9. …………………

解密jQuery事件核心 – 绑定设计（一）
解密jQuery事件核心 – 委托设计（二）
解密jQuery事件核心 – 自定义设计（三）
解密jQuery事件核心 – 模拟事件（四）