web前段小知识杂记
1.苹果浏览器下input border不起作用
CSS增加设置:
-webkit-appearance: none;
2.IE浏览器URL请求地址中,url中携带参数中有中文,中文不能自动转成URL格式,需要强制装换
增加:encodeURI(url)方法。
3.display设置为inline-block的时候,一行中的元素之前会有间距。
设置父元素:font-size:0
或者设置 margen-left:-4px;
4.ajax请求携带上cookies
原生ajax请求方式:
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();
jquery的ajax的post方法请求:
$.ajax({
type: "POST",
url: "http://xxx.com/api/test",
dataType: 'jsonp',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(){
},
error:function(){
}
})
服务器端设置:
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin:http://www.xxx.com");
5.ajax请求的时候设置头信息
//设置Header值,并发送到服务器
function set(){
$.ajax({
url: "Services",
type: "POST",
//1-参数模式
headers: {
"SID" : "10086"
},
beforeSend: function(reqObj, settings) {
//2-动态设置
reqObj.setRequestHeader('XXX', 'VVV');
},
data: {},
error: function(resObj, textStatus, errorThrown) {
//TODO
},
success: function(data, textStatus, resObj) {
alert(resObj.responseText);
}
});
}
6.关于websocket,在前端建立websocket连接之后,如果后台服务器重启,或者断开之后,客户端websocket不会主动重写链接.
解决办法是,将建立websocket的代码封装成一个函数,在websocket.onclose中调用。
如下:
function create_websocket(){
var websocket=new Websocket("ws:");
websocket.onopen=function(){
//do something
}
websocket.onmessage=function(web)
{
//do something
}
websocket.onclose=function(){
setTimeout(function(){
create_websocket();
},5000);
}
}
7.对象采用数组的方法访问
Object.keys()
var bookAuthors = {
"Farmer Giles of Ham": "J.R.R. Tolkien",
"Out of the Silent Planet": "C.S. Lewis",
"The Place of the Lion": "Charles Williams",
"Poetic Diction": "Owen Barfield"
};
var arr = Object.keys(bookAuthors);
8.在IE内核浏览器下,button按钮需要设置line-height,默认从父元素获取line-height.
9.input change事件是在失去焦点后执行。
10.判断是否为IE浏览器
if ("\v" == "v") //true为IE浏览器
11.select默认样式
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
12.2个inline-block的元素并排的时候会会出现对不齐的问题,这是由于baseline问题引起的,可以将两个元素设置为同样的高度,另外设置:
vertical-align: top 或者
vertical-algin: bottom
13.对于ajax请求,在对同一接口短时间内执行多次请求,返回数据队列与接口请求队列不一致问题处理方法。
//1.对每个ajax请求结果请求判断,如果没有请求成功,不让用户执行新的请求。
// 2.在对同一接口进行数据请求之前终止之前未完成的接口请求。
var request;
function search() {
var get_url='/company/search/?keyword=' + keyword;
if(request!=null)
{
//终止请求
request.abort();
}
console.log(request);
request=$.ajax({
url:get_url,
type:"GET",
success: function(data){
dearch_deal(data);
request=null;
}
});
function dearch_deal(data) {
//处理逻辑
}
return false;
}
14.安卓手机在webview标签中默认最小字体为8px;用rem单位,计算基准值的时候需要设置一下安卓手机的webview
mWebView.getSettings().setMinimumFontSize(1);
mWebView.getSettings().setMinimumLogicalFontSize(1);
15.在苹果浏览器下new Data()不支持yyyy-dd-mm这种格式
//可以直接转换一下
new Date('2011-04-12'.replace(/-/g, "/"))
- #### fixed浏览器无效
fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效。
解决方法:使用transform样式的元素,不要包含fixed定位的子元素。或者transform(none);
17.html页面在ios下白屏的问题
问题描述:在ios的wkwebview下采用Vue进行列表渲染,下拉后点击某一下再返回会出现页面白屏的Bug,
解决办法:用windows.scrollTo(1,0)执行一下
18.lineHeight在安卓下不居中的问题
问题描述:在安卓部分机型上设置lineheight文字会偏上
解决办法:
line-height:
border-top:1px solide transparent;
19.CORS 跨域发送 Cookie
20.cookie详解(含vue-cookie)
21.单点登录(SSO)的设计与实现
22.漫谈单点登录(SSO)
23.新语法
let a=1
`a${a}b` //相当于是字符串拼接 输出 a1b
24.让vue-cli初始化后的项目集成支持SSR
25.在进行js浮点运算的时候一定要注意js的运算精度,结果采用toFixed() 控制小数位
注意:tofixed(2) 输出为字符串
比如 60.79+12
控制台输出:72.78999999999999