图解Post请求编码格式：multipart/form-data

图解Post请求编码格式：application/x-www-form-urlencoded

Nginx设置CORS：允许多个跨域Origin

Nginx代码： server { … …

    set $cors_origin "";
    if ($http_origin ~* "^http://127.0.0.1$") {
            set $cors_origin $http_origin;
    }
    if ($http_origin ~* "^http://localhost$") {
            set $cors_origin $http_origin;
    }
    add_header Access-Control-Allow-Origin $cors_origin;

    location / {
            if ($request_method = 'OPTIONS') {
               add_header Access-Control-Allow-Origin $cors_origin;
               add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                    return 204;
            }
             
            ... ...
    }

}

CORS: 设置Access-Control-Allow-Origin HEADER例子

gen_Eric 2013-09-05

不允许设置多个origin，需要服务器自己判断设置origin，或者只能设置*。

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: http://localhost:8080

Access-Control-Allow-Origin: https://developer.mozilla.org/

CORS：允许获取跨区请求返回的Cookie

The default behavior of cross-origin resource requests is for requests to be passed without credentials like cookies and the Authorization header. However, the cross-domain server can permit reading of the response when credentials are passed to it by setting the CORS Access-Control-Allow-Credentials header to true. Now if the requesting website uses JavaScript to declare that it is sending cookies with the request:

And the response to the request is:

JS查看当前Tab是否处于激活状态

清风 2022-11-21

hidden是document的属性，可以判断页面是否显示的是当前的页面。值为true:表示页面处于非激活状态(网页进入后台)，反之false处于激活状态（正在被浏览）。

• 页面最小化
• 页面在后台运行
• 切换tab栏到其他页面

测试：

Chrome console中测试，运行下面的代码，然后切换tab：

setTimeout(function f(params) {

    console.log(document.hidden)

}, 3000)

输出：true

BootStrap 如何居中图片

CSS如何令文字垂直居中？

This is the simplest way to do it if you need multiple lines. Wrap you span'd text in another span and specify its height with line-height. The trick to multiple lines is resetting the inner span's line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

HTML术语：Caret

CSS: Chrome 实现 max-lines 效果

代码如下:

.max-lines-2 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}

禁止在 contentEditable 的元素内换行

document.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
    if (evt.keyCode === 13) {
        evt.preventDefault();
    }
});

img 的data-src 属性及懒加载

CSS：如何影藏滚动条，并且不影响滚动

.keep-scrolling {
  background-color: #EEE;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll the y axis */
}

/* Hide the scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
  display: none;
}

/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none;  /* Firefox */
}

<div class="keep-scrolling">
</div>

如何使用正则表达式和 split

也可以将 split  和正则表达式一起使用。这意味着你不仅可以将字符串拆分为与确切字符或模式匹配的子字符串，如下所示：

const regex = /\d{2}a/;
const str = "Hello54 How 64aare you";
console.log(str.split(regex))
// ["Hello54 How ", "are you"]

字符串在 64a 处被拆分，因为子字符串与正则表达式相匹配。

JavaScript 中使用正则表达式和.replace

要使用正则，需要将 replace 的第一个参数替换为正则语法（例如 /regex/）。此语法用作一种模式，其中与字符串匹配的任何部分都将被新的子字符串替换。

这是一个例子：

// matches a number, some characters and another number
const reg = /\d.*\d/
const str = "Java3foobar4Script"
const newStr = str.replace(reg, "-");
console.log(newStr);
// "Java-Script"

字符串 3foobar4 和正则 /\d.*\d/ 匹配，所以它被替换了。

URL结构

小tip: 如何让contenteditable元素只能输入纯文本