web前段小知识杂记

Published by taoacat on

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, "/"))
  1. #### 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
Categories: 学习

发表评论

电子邮件地址不会被公开。