yunlzhang / issues-solutions Goto Github PK

1、apache
首先编辑httpd.conf

找到这行

#LoadModule headers_module modules/mod_headers.so
把#注释符去掉
LoadModule headers_module modules/mod_headers.so
目的是开启apache头信息自定义模块
然后在独立资源域名的虚拟主机添加一行
Header set Access-Control-Allow-Origin *
意思是对这个域名的资源进行访问时，添加一个头信息
重启apache
To add the CORS authorization to the header using Apache, simply add the following line inside either the , , or sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

Header set Access-Control-Allow-Origin "*"

参考链接
https://www.w3.org/TR/cors/#access-control-allow-origin-response-header
https://gist.github.com/hoandang/8066175
https://gist.github.com/Plou/5809547
http://enable-cors.org/server_apache.html

2、nginx

处理这种跨域，只要设置Access-Control-Allow-Origin，允许目标域名访问就可以了，Access-Control-Allow-Origin是HTML5新增的一个特性，在资源类的域名下做如下配置（nginx的配置，apache相似处理）​

location ~ ..(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.) {
add_header Access-Control-Allow-Origin http://www.yuehetong.com或(*);

}

解决办法： 最外层元素高度 为一屏高度，内容超出高度滚动；
定位元素position:fixed;bottom:0;left:0;

参考：腾讯公益https://ssl.gongyi.qq.com/m/weixin/detail.htm?showwxpaytitle=1&et=tx_gzh&gt=m_recmd&ADTAG=idx.m.m_recmd#p%3Ddetail%26id%3D27335

$.serialize()方法会将空格替换成 + 号 ，即调用encodeURIComponent对字符串进行编码，
解码后需要对+号特殊处理，先替换+号成空格 ,然后再调用decodeURIComponent方法解码

在火狐上只能通过html元素来获取和设定页面滚动高度，而在谷歌上反之只能用body元素来获取和设定。
若要设定动画，可以通过$('html,body').animate({scrollTop:'value'})，$(document)无法设定动画；
若要获取滚动高度，通过$(document).scrollTop()来获取

body添加属性 -webkit-tap-highlight-color: transparent;

ios系统移动端回弹效果 -webkit-overflow-scrolling: touch;

ajax提交的同时触发了表单提交，用e.preventDefault()阻止一下默认事件，

解决办法：
监听input的change事件，将event.target.value设为空

$('input[type=file]').on('change',function(event){
//do something
event.target.value = ''

})

在Safari浏览器上 change 事件先触发，click事件后触发

在火狐浏览器中 click事件会触发两次，分别是click change click

监听input、textarea等的input,compositionstart,compositionend事件
//基于jquery的写法
var cpLock = false;
$(obj).on({
input:function(){
if(!cpLock){
//do something
}
},
compositionstart:function(){
cpLock = true;
},
compositionend:function(){
cpLock = false;
//do something
}

})

overflow:hidden || scroll;hidden掉的是内边距外的区域

var obj = link || script;
if(obj.readyState){
//IE
obj.onreadaystatechange = function(){if(/complete|loaded/.test(obj.readyState)){
//do something
}}
}else{
obj.onload = function(){
//do something
}
}

float布局，容器不固定宽度，在windows的chrome中滚动条会占用页面宽度，导致页面错乱

textarea自动长高 autosize.js

function openApp(options){
var baseScheme = '####://' + options.route + '?';
var createScheme = function(_options){
_options = _options || {};
var urlScheme = baseScheme;
for(var item in _options){
urlScheme = urlScheme + item + '=' + _options[item] + '&';
}
urlScheme = urlScheme.substring(0,urlScheme.length - 1);
return urlScheme;
};
window.location.href = createScheme(options.query);
//若跳转不成功，两秒后跳到下载页
var timeout = setTimeout(function(){
window.location.href = '#link';
},2000);
document.addEventListener('visibilityChange', function() {
clearTimeout(timeout)
}, false);
}

//移动端开发在app中代开链接