BOM 相关使用方法收录

1. 监听浏览器返回键、后退、上一页事件（popstate）操作返回键。

在 WebApp 或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

一、简单介绍 history 中的操作。

1. window.history.back()，后退

2. window.history.forward()，前进

3. window.history.go(num)，前进或后退指定数量历史记录

4. window.history.pushState(state, title, utl)，在页面中创建一个 history 实体。直接添加到历史记录中。

参数：　　 state：存储一个对象，可以添加相关信息，可以使用 history.state 读取其中的内容。

title：历史记录的标题。

url：创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

5. window.history.replaceState()，修改当前的 history 实体。

6. popstate 事件，history 实体改变时触发的事件。

7. window.history.state，会获得 history 实体中的 state 对象。

二、使用方法

1. 添加一条 history 实体作为替代原来的 history 实体

function pushHistory() {
  var state = {
    title: "title",
    url: "#",
  };
  window.history.pushState(state, "title", "#");
}
pushHistory();

2. 监听 popstate 事件

window.addEventListener(
  "popstate",
  function () {
    //doSomething
  },
  false
);

三、 注意事项

1.每次返回都会消耗一个 history 实体，若用户选择取消离开，则需要继续 pushState 一个实体

2.pushState 只能一个实体，多个实体返回会出错。使用 window.history.state 查询是否存在添加的实体。

2. windows.open 如何循环下载多个文件 (多个文件下载被拦截)

参考文章@nanke_yh

问题:

在使用 windows.open 下载多个文件的时候，只有第一个文件能下载，后面的文件被拦截。

解决办法：

使用多个 url 文件下载，通过 iframe 下载文件。

 var hiddenIFrameID = "hiddenDownloader" + count;
  var iframe = document.createElement("iframe");
  iframe.id = hiddenIFrameID;
  iframe.style.display = "none";
  document.body.appendChild(iframe);
  iframe.src = item.downloadAddress; // 直接下载，不会弹出新的页面

代码片段：

let data = [
  {
    id: "978eb4d5-fa85-4b32-a730-762a0cec112e",
    name: "3A模板导入正式数据.xls",
    downloadAddress:
      "https://oss01-zb01-hz-internal.test.geely.com/gqm-file/2024/06/06/723cf2c2-b01b-4b0f-be28-29a84346bff6.xls?AWSAccessKeyId=L18EC9RHE38FD2NE4MSQ&Expires=1717726301&Signature=aEZO1byX5KrVKGkWIrBg9akd2a8%3D",
    onlinePreviewAddress:
      "https://sqems-master-sit.geely-test.com/sqems-file/file/preview/978eb4d5-fa85-4b32-a730-762a0cec112e",
    watermarkAddress:
      "https://sqems-master-sit.geely-test.com/sqems-file/file/watermark/978eb4d5-fa85-4b32-a730-762a0cec112e",
  },
  {
    id: "c3563d8a-74c7-4015-86f9-c31304990809",
    name: "质量协议导出台账 (1).xls",
    downloadAddress:
      "https://oss01-zb01-hz-internal.test.geely.com/gqm-file/2024/06/07/17454876-3bce-4352-90a8-6769a7d52a3a.xls?AWSAccessKeyId=L18EC9RHE38FD2NE4MSQ&Expires=1717726301&Signature=47xYokA3jca%2Ft6kTkYCwh83uhcM%3D",
    onlinePreviewAddress:
      "https://sqems-master-sit.geely-test.com/sqems-file/file/preview/c3563d8a-74c7-4015-86f9-c31304990809",
    watermarkAddress:
      "https://sqems-master-sit.geely-test.com/sqems-file/file/watermark/c3563d8a-74c7-4015-86f9-c31304990809",
  },
];

// 重要代码
data.map((item, count) => {
  var hiddenIFrameID = "hiddenDownloader" + count;
  var iframe = document.createElement("iframe");
  iframe.id = hiddenIFrameID;
  iframe.style.display = "none";
  document.body.appendChild(iframe);
  iframe.src = item.downloadAddress; // 直接下载，不会弹出新的页面
});