window 事件

onbeforeunload

  • 页面关闭或重载前会执行
  • console.log 不会输出
1
2
3
4
5
6
window.onbeforeunload = function(e) {
  let appInfo = store.getters.appInfo
  if (appInfo) {
    store.commit("SET_APPINFO", appInfo)
  }
};

localStorage

  • localStorage只能存储字符串数据
  • 存储 json 对象时：先把json对象转换成字符串 JSON.stringify(jsonObj)，然后用 localStorage 存储起来
  • 获取时：先读取出来，再转换成json对象JSON.parse(cacheData)
1
2
3
4
5
6
7
8
// 存储
localStorage.setItem(APPINFO, JSON.stringify(appInfo))

// 获取
let appInfo = localStorage.getItem(APPINFO)
if(appInfo) {
  store.commit('SET_APPINFO', JSON.parse(appInfo))
}

data 扩展属性

1
2
3
4
5
data-cur="hello"

事件：
let key = e.currentTarget.dataset.cur
//hello

上传文件限制类型为图片

其它类型限制参考《Web-input-file》

1
<input type="file" name="myImage" accept="image/*" />

Chrome 中打开 IE 浏览器，跳转到指定页面并传递参数

https://blog.csdn.net/zhaoyunfei1/article/details/104899996?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5

为方便使用，使用winrar将指定目录打包为exe，参考文档《Windows-winrar打包exe.md》

  1. 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>调用本地 IE 浏览器打开百度首页</title>
    </head>
    <body>
    <a href="openIE://www.baidu.com?a=1&b=2" />百度一下
    </body>
    </html>

  2. runreg.bat

    1
    REGEDIT /S openIE.reg

  3. openIE.reg

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    Windows Registry Editor Version 5.00

    [HKEY_CLASSES_ROOT\openIE]
    @="URL:openIE Protocol"
    "URL Protocol"=""

    [HKEY_CLASSES_ROOT\openIE\DefaultIcon]
    @="iexplore.exe,1"

    [HKEY_CLASSES_ROOT\openIE\shell]

    [HKEY_CLASSES_ROOT\openIE\shell\open]

    [HKEY_CLASSES_ROOT\openIE\shell\open\command]
    @="\"C:\\Program Files\\openIE\\openIE.bat\" \"%1\""

  4. openIE.bat

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @echo off
    set m=%1%
    set m=%m:openIE:=%
    IF "%PROCESSOR_ARCHITECTURE%" == "x86" (
        start "" "C:\\Program Files\\Internet Explorer\\iexplore.exe" %m%
    ) ELSE (
    	IF "%PROCESSOR_ARCHITECTURE%" == "X86" (
    	    start "" "C:\\Program Files\\Internet Explorer\\iexplore.exe" %m%
    	) ELSE (
    	 	start "" "C:\\Program Files (x86)\\Internet Explorer\\iexplore.exe" %m%
    	)
    )
    exit

IE 浏览器打开其他浏览器

1
2
3
4
5
function start(){ 
            var objShell = new ActiveXObject("wscript.shell"); 
            var cmd= "cmd /c start C:/\"Program Files (x86)\"/Google/Chrome/Application/chrome.exe \"http://www.baidu.com\"";
            objShell.Run(cmd,0,true); 
}

关闭表单自动填充

https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

  1. 浏览器设置-自动填充-关闭 chrome://settings/autofill
  2. 表单 form 设置 autocomplete="off"

不让浏览器缓存 js

  1. 在 html 头部增加如下代码

    1
    2
    3
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">

  2. 在引用 js 文件的时候，添加随机数

    1
    document.write("<script type='text/javascript' src='update.js?"+Math.random();+"'></script>");

点击 button 按钮后页面引起刷新

1
2
//button 缺少 type=button 属性
<button type="button">xxx</button>

表单重复提交

鼠标连点，可能导致表单提交多次，请求重复多次。前端应该控制：例如变量控制

readonly & disabled 区别

readonly 和 disabled 是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。
disabled：对于所有的表单元素都有效，包括 select, radio, checkbox, button 等。如果一个输入项的 disabled 设为 true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
readonly：只针对 input (text /password) 和 textarea 有效；如果设为 true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为 form 的一项提交。

相对协议 http/https

可以使用相对协议引入资源，会自动根据站点协议类型添加协议，示例。前提是：资源本身支持两种协议

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>