前端技术个人笔记

浏览器的一些行为

以下内容有多数解释都是来源于MDN文档open in new window

UA（浏览器 UA 标识）

大多数的浏览器软件内置的浏览器引擎都自带 UA,常规的 H5 都可以推断出浏览器的环境

function whatWebView() {
  var e = window.navigator.userAgent.toLowerCase();
  var t = -1 < e.indexOf("dtdreamweb"),
    r = -1 < e.indexOf("hanweb") && !t,
    n = -1 < e.indexOf("micromessenger"),
    o = -1 < e.indexOf("alipayclient"),
    i =
      (-1 < e.indexOf("miniprogram") || -1 < e.indexOf("alipayide")) &&
      -1 < e.indexOf("alipay"),
    a = -1 < e.indexOf("eshiminapp"),
    s = -1 < e.indexOf("iflytek_mmp"),
    c = -1 < e.indexOf("miniprogram") && -1 < e.indexOf("dingtalk"),
    u = -1 < e.indexOf("dingtalk"),
    l = -1 < e.indexOf("000001@jcss");
  return t
    ? "dtdream"
    : r
    ? "hanweb"
    : a
    ? "eshimin"
    : s
    ? "iflytek"
    : n
    ? "wetchat"
    : c
    ? "dingtalkMini"
    : u
    ? "dingtalk"
    : i
    ? "alipayMini"
    : o
    ? "alipay"
    : l
    ? "JCSS"
    : "other";
}

剪切板

  • document.execCommand 当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。 大多数命令影响document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素(input、textarea)。

    // 复制到剪切板，在某些新的浏览器可能会作费该api 请关注Clipboard API
var aux = document.createElement("input"); 
aux.setAttribute("value", data); 
document.body.appendChild(aux); 
aux.select();
document.execCommand("copy"); 
document.body.removeChild(aux);

// 同理 剪切粘贴板为
document.execCommand("cut"); 
// 删除粘贴板
document.execCommand("delete");

  • Clipboard API 剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

    经测试，在Chrome中需要先鼠标聚焦于document中可以在控制台输入以下进行一个尝试

    // 会尝试获取浏览器权限（进行授权申请）进行粘贴板的使用，
setTimeout(() => {
  navigator.clipboard.readText()
  .then(clipText => console.log(clipText))
  .catch(() =>{ alert('您需要先授予我们操作粘贴板的能力，才能更好的为您服务')})
},2000)

  • domain 可以做到处理账号的登录在多个项目共享 access_token 之类数据；

    domain表示的是 cookie 所在的域，默认为请求的地址，如网址为www.test.com/test/index.html，那么 domain 默认为 www.test.com。而跨域访问，如域 A 为 t1.test.com，域 B 为 t2.test.com，那么在域 A 生产一个令域 A 和域 B 都能访问的 cookie 就要将该 cookie 的 domain 设置为.test.com如果要在域 A 生产一个令域 A 不能访问而域 B 能访问的 cookie 就要将该 cookie 的 domain 设置为 t2.test.com。

  • path；

    path 表示 cookie 所在的目录，默认为/，就是根目录。在同一个服务器上有目录如下：/test/ /test/cd/ /test/dd/现设一个 cookie1 的 path 为/test/，cookie2 的 path 为/test/cd/，那么 test 下的所有页面都可以访问到 cookie1，而/test/和/test/dd/的子页面不能访问 cookie2。这是因为 cookie 能让其 path 路径下的页面访问。

SessionStorage

保存的是一个会话的数据，也就是说只在一次会话中有效，关闭就会销毁数据，不是持久的本地数据存储，只是一个会话的存储；

LocalStorage

本地数据持久化存储，在操作上和第一种没有什么区别，只是存储时间上不同

浏览器的拖拽行为

拖拽文件到浏览器

const dropZone = window.document
// 文件刚进入浏览器
dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);
// 文件悬浮在浏览器上
dropZone.addEventListener("dragover", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);
// 拖拽文件离开浏览器文档
dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);
dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();
  var df = e.dataTransfer;
  console.log(df.items,df.files)
  var dropFiles = []; // 存放拖拽的文件对象
   
  if(df.items !== undefined) {
    // Chrome有items属性，对Chrome的单独处理
    for(var i = 0; i < df.items.length; i++) {
      var item = df.items[i];
      // 用webkitGetAsEntry禁止上传目录
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
      }
    }
  }
})
Last Updated: