html5 & javascript 笔记

HTML5

浏览器 user-agent 标识判断

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent

https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
https://developer.mozilla.org/zh-CN/docs/Web/HTTP

input

<!--- 不被html5后规范采纳的，仅用于解决Iphone 输入框，弹出数字键盘，却又可以在代码中加入逗号用作格式化 --->
<input placeholder="test" id="test" inputmode="decimal" />

<!--- html5 新特性，安卓手机 弹出键盘是可以有小数点的 --->
<input placeholder="test2" id="test2" pattern="[0-9]*" />

form表单内 button type=submit

<form>
  <input type="text" name="username">
  <input type="submit" onclick="login">
</form>

预期：以上代码结构，我想在点击 submit button 时，在click login 方法内以ajax方式请求后端
不能以改结构方式处理，因为form input submit 都与style相关联
问题：实际结果始终不如预期
原因： form表单虽然没有 action 属性，点击 submit同样会触发form 提交方式，action为当前地址栏URL
解决：点击submit button 时，使用 e.preventDefault(); 阻止默认的from表单提交方式

JavaScript 常用脚本记录

去掉数字末尾的0

1 2	// 去掉数字末尾的0 "0.000100".match(/[-]?\d(?:\d\|[.]\d[^0])/);

JavaScript设计模式

资料：gitbook书籍资源1

素材库

图标素材库：阿里图标库

文件下载

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192.168.7.128:8080/download');
xhr.onprogress = function(e) {
  if (e.lengthComputable) {
    console.log(e.loaded + ' / ' + e.total);
  }
};
xhr.onloadstart = function(e) {
  console.log('start');
};
xhr.onloadend = function(e) {
  console.log('end');
};
xhr.send({
  form: JSON.stringify({
    id: 1
  })
});

/**
 * PC 文件下载
 * @param {Object} params
 * @param {Blob} params.blob
 * @param {String} params.fileName
 */
export function fileDownload(params) {
  const uA = window.navigator.userAgent
  const isIE =
    /msie\s|trident\/|edge\//i.test(uA) &&
    !!(
      'uniqueID' in document ||
      'documentMode' in document ||
      'ActiveXObject' in window ||
      'MSInputMethodContext' in window
    )
  const isEdge = uA.indexOf('Edge') > -1

  if (isIE || isEdge) {
    navigator.msSaveBlob(params.blob, params.fileName)
  } else {
    const url = window.URL.createObjectURL(params.blob)
    const link = document.createElement('a')
    link.setAttribute('style', 'display:none')
    link.setAttribute('id', 'download')
    link.setAttribute('href', url)
    link.setAttribute('download', params.fileName)
    document.body.appendChild(link)
    link.click()
    link.addEventListener('click', function() {
      URL.revokeObjectURL(url)
      document.getElementById('download').remove()
    })
  }
}

跨域问题

如跨域在Chrome正常，火狐浏览器提示
firefox with reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200, *’).
则应检查火狐浏览器是否有安装 cors 相关插件
参考链接：firefox with reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200, *’).

IE 站点图标无法切换问题

参考链接：https://stackoverflow.com/questions/29404559/how-to-force-ie11-to-request-a-new-favicon
html

1	<link rel="icon" type="image/x-icon" href="resources/favicon.ico">

javascript

// Chrome allows you to simply tweak the HREF of the LINK tag.
// Firefox appears to require that you remove it and readd it.
function setFavicon(url)
{
    removeFavicon();
    var link=document.createElement('link');
    link.type='image/x-icon';
    link.rel='icon';
    link.href=url;
    document.getElementsByTagName('head')[0].appendChild(link);
    if (window.console) console.log("Set FavIcon URL to " + getFavicon().href);
 }

function removeFavicon()
{
    var links=document.getElementsByTagName('link');
    var head=document.getElementsByTagName('head')[0];
    for(var i=0; i<links.length; i++)
    {
        if(links[i].getAttribute('rel')==='icon'){
             head.removeChild(links[i])
        }         
    }      
}

JavaScript编码

let RESERVED_CHAR_SET =
  'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-.~_'

function get_normalized_char(b) {
  let result = new Map()
  for (let i = 0; i < 256; i++) {
    // 转ASCII码，跟java， Char temp =  (char)i ; 一样
    let c = String.fromCharCode(i)
    if (!b && c === '/') {
      continue
    }
    if (RESERVED_CHAR_SET.indexOf(c) !== -1) {
      result.set(c, c)
    } else {
      // 转16进制
      let temp = i.toString(16).toUpperCase()
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
      result.set(c, '%' + temp.padStart(2, '0'))
    }
  }
  return result
}

window.encodString = function(path, b) {
  let length = path.length
  let result = ''
  let encode_f = get_normalized_char(b)

  for (let i = 0; i < length; i++) {
    if (path.charAt(i) === '/' && !b) {
      result += '/'
    }
    let c = encode_f.get(path.charAt(i))
    if (!c) {
      continue
    }
    result += c
  }
  return result
}

获取指定时区时间（中国）

方案1,兼容IE，chrome

var timezone = 8; //目标时区时间，东八区
var offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
var nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
var targetDate = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
console.log("东8区现在是：" + targetDate);

参考链接：点这里

方案2，不兼容IE

// 获取北京时间，毫秒数
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
Date.parse(new Date().toLocaleString("en", {timeZone: "Asia/Shanghai", timeZoneName: 'short'}))

// e.g.
var aestTime = new Date().toLocaleString("en-US", {timeZone: "Australia/Brisbane"});
aestTime = new Date(aestTime);
console.log('AEST time: '+aestTime.toLocaleString())

var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Shanghai"});
asiaTime = new Date(asiaTime);
console.log('Asia time: '+asiaTime.toLocaleString())

var usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
usaTime = new Date(usaTime);
console.log('USA time: '+usaTime.toLocaleString())

var indiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Kolkata"});
indiaTime = new Date(indiaTime);
console.log('India time: '+indiaTime.toLocaleString())

参考资料：click me

http response

参考资料

# 设置缓存
expires 1d;
add_header Pragma private;
add_header Cache-Control "private,no-cache";

谷歌Chrome 浏览器禁用安全机制

click me
–disable-web-security –user-data-dir

谷歌浏览器缓存变化情况

第一次打开页面时，从服务器下载

退出浏览器后（关闭所有标签页），再次打开时，看到 Size列说明是：读取disk cache

不关闭浏览器，刷新时，说明 memory cache（因为js文件已经加载进内存

*prefetch cache，是html5 缓存标签，表示该文件在浏览器空闲时，预先加载该文件

浏览器使用缓存时，与服务端文件比对的两个关键属性

last Modify
文件一共有两个时间：创建时间与最后修改时间(Last modify)
复制文件时，只会改变创建时间，最后修改时间不会改变

E-TAG
相当于文件的指纹，如文件未发生变更，E-TAG 不会发生改变

跨域

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String username = request.getParameter("name");
	String password = request.getParameter("password");
	System.out.println("username: "+ username +"   \n password: "+password);
	
	Map<String, Object> result = new HashMap<String, Object>();
	UserVO user = new UserVO(username,password);
	result.put("user", user);
	result.put("success", true);
       response.setContentType("text/html;charset=gb2312");
       response.setHeader("Access-Control-Expose-Headers", "Content-Type,Cversion,test,test1,Test2");
       
       response.setHeader("Access-Control-Request-Headers", "Content-Type,Cversion,test,test1,Test2");
       response.setHeader("Access-Control-Allow-Origin", "*");
       response.setHeader("Access-Control-Allow-Methods", "POST,OPTIONS,GET");
       response.setHeader("Access-Control-Max-Age", "60");
       response.setHeader("Access-Control-Allow-Credentials", "true");
       response.setHeader("Cversion", "cccc");
       response.setHeader("test", "test");
       response.setHeader("test1", "test1");
       response.setHeader("Test2", "test2");
       
       PrintWriter out = response.getWriter();  
       JSONObject LoginFieldsList = JSONObject.fromObject(result);
       System.out.println(LoginFieldsList.toString());
       out.println(LoginFieldsList);  
       out.flush();  
       out.close(); 
}

服务端需要响应 header参考

遇到的问题列表

new Date().getTime() 时间戳

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
*这个 getTime 获取到的时间戳，都是格林威治时间数值，所以这个数值使用的格林威治时区的时间，当服务端与客户端交互时，做时间差比对时，不需要转换为服务器端时区时间来执行 getTime

setTimeout() setInterval() 定时器问题 & 注意点

剪切板 & 自动打开摄像头

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

note html5 & javascript 笔记