关于网页上传文件三种方案情况场景说明 1.主框架中 2.iframe框架中同域情况 3.iframe框架中跨域情况

关于网页上传文件方案三种情况场景说明

1.最常规的场景 文件框在网页主框架中 

 主框架网址为 file:///D:/360MoveData/Users/Administrator/Desktop/code%20(10).html

  async function文件上传(e) {
            let { tabId: t, selector: r, files:g } = e
            var n={tabId: t}
            chrome.debugger.attach(n, "1.3");
            let l = await chrome.debugger.sendCommand(n, "DOM.getDocument", {});
            l = await chrome.debugger.sendCommand(n,"DOM.querySelector", {"nodeId": l.root.nodeId,"selector":r});
            l = await chrome.debugger.sendCommand(n, "DOM.setFileInputFiles", {"nodeId":l.nodeId,"files":g});
            await chrome.debugger.detach(n);
            console.log("测试1");
    }

//参数说明
tabId: 调试目标
selector: 文件框css选择器
files: 需要上传文件的路径数组

//参数示例
{
  "tabId": 123,
  "selector": "#fileInput",
  "files":["C:/Users/Administrator/Desktop/js脚本.txt"]
}

2.文件框在网页主框架的iframe框架中 主框架和iframe框架网址同域

主框架网址为 file:///D:/360MoveData/Users/Administrator/Desktop/code%20(10).html

async function 上传文件2(e) {
            let { tabId: t, iframeselector: r, fileInputselector: o, files:g } = e
            var n={tabId: t}
            let a= await chrome.debugger.attach(n, "1.3");
            let l = await chrome.debugger.sendCommand(n, "DOM.getDocument", {});
            l = await chrome.debugger.sendCommand(n,"DOM.querySelector", {"nodeId": l.root.nodeId,"selector":r});
            l = await chrome.debugger.sendCommand(n,"DOM.querySelector", {"nodeId": l.nodeId+1,"selector":o});
            l = await chrome.debugger.sendCommand(n, "DOM.setFileInputFiles", {"nodeId":l.nodeId,"files":g});
            console.log("测试2");
}

//参数说明
tabId:  调试目标
iframeselector:  iframe框架的css选择器
fileInputselector:  文件框的css选择器
files:  需要上传文件的路径数组

//参数示例
{
tabId: 123
iframeselector:"#iframe"
fileInputselector:"#fileInput"
files:["C:/Users/Administrator/Desktop/11.png"]
}

3.文件框在网页主框架的iframe框架中 主框架和iframe框架网址跨域

主框架网址为 file:///D:/360MoveData/Users/Administrator/Desktop/code%20(10).html

darcyc 大佬的 跨域方法 牛的是不用封装到浏览器插件里,可以直接调用修改

 (async function () {
  const targetIds = [];
  let d = await chrome.debugger.getTargets();
  for (const targetInfo of d) {
    // 这里我们通过 iframe 的 url 来找到对应的 target, 上面测试地址里的iframe就是这个地址
    // 具体 chrome.debugger.getTargets() 返回了什么可以在插件的背景页的控制台写写看看
    if (targetInfo.url.includes("runner.html")) {
      targetIds.push(targetInfo.id);
    }
  }

  // 为方便演示，我们直接取得第一个匹配
  let target = { targetId: targetIds[0] };
  
  // 这里是开始做正常的链接
  await chrome.debugger.attach(target, "1.3");
  await chrome.debugger.sendCommand(target, "DOM.enable");

  d = await chrome.debugger.sendCommand(target, "DOM.getDocument");
  d = await chrome.debugger.sendCommand(target, "DOM.querySelector", {
    nodeId: d.root.nodeId,
    selector: "input[type='file']",
  });
  await chrome.debugger.sendCommand(target, "DOM.setFileInputFiles", {
    nodeId: d.nodeId,
    
    // 这里自己改成本地的地址来测试，小贴士：如果懒得写反斜杠的话可以用原始字符串
    // JS里是：String.raw`C:\example\a.txt`，类似 C# 的 @"" 或者 python 的 r""
    files: ["D:\\360MoveData\\Users\\Administrator\\Desktop\\测试数据.txt"]
  });
  
  // 记得 detach 否则下一次无法连接，在自己实践的时候可以把 detach 放在 try-finally 里确保被调用
  await chrome.debugger.detach(target);
})();