如何通过原生JavaScript（Vanilla JS）用大量数据调用自定义协议？

以下是几个不依赖服务器或第三方库、兼容Web服务器（http://）和本地文件（file://）运行模式的可行方案：

方案1：分块传输数据 #

将大数据拆分为多个符合URL长度限制的小块，通过多次自定义协议调用传递，由目标程序负责拼接重组。

实现示例 #

function sendLargeDataViaProtocol(protocolPrefix, data) {
  const chunkSize = 1800; // 预留空间用于块索引等标识
  const chunks = [];
  const totalChunks = Math.ceil(data.length / chunkSize);

  // 拆分数据为块
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = start + chunkSize;
    chunks.push(data.slice(start, end));
  }

  // 逐个发送块，携带索引和总块数
  chunks.forEach((chunk, index) => {
    const encodedChunk = encodeURIComponent(chunk);
    const protocolUrl = `${protocolPrefix}?chunk=${encodedChunk}&index=${index}&total=${totalChunks}`;
    // 用隐藏iframe触发协议，避免页面跳转
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = protocolUrl;
    document.body.appendChild(iframe);
    setTimeout(() => document.body.removeChild(iframe), 500);
  });
}

// 使用示例
const largeData = "你的大段数据内容...";
sendLargeDataViaProtocol('mycustomprotocol', largeData);

注意：目标程序需要实现块的接收、索引排序和拼接逻辑，同时处理重复接收的情况（比如延迟导致的重发）。

方案2：剪贴板中转数据 #

通过JS将大数据写入系统剪贴板，再触发自定义协议通知目标程序读取剪贴板内容。

实现示例 #

async function sendDataViaClipboard(protocolPrefix, data) {
  try {
    // 写入剪贴板
    await navigator.clipboard.writeText(data);
    // 触发协议通知程序读取剪贴板
    const protocolUrl = `${protocolPrefix}?action=readClipboard`;
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = protocolUrl;
    document.body.appendChild(iframe);
    setTimeout(() => document.body.removeChild(iframe), 500);
  } catch (err) {
    console.error('剪贴板写入失败:', err);
    // 降级到分块传输
    sendLargeDataViaProtocol(protocolPrefix, data);
  }
}

// 使用示例
const largeData = "你的大段数据内容...";
sendDataViaClipboard('mycustomprotocol', largeData);

注意：

• 部分浏览器在file://协议下可能限制剪贴板访问，需要用户手动授权；
• 目标程序需监听readClipboard指令，读取系统剪贴板内容。

方案3：本地临时文件共享（现代浏览器） #

利用File System Access API将数据写入本地临时文件，再通过自定义协议传递文件路径给目标程序，由程序读取文件内容。

实现示例 #

async function sendDataViaTempFile(protocolPrefix, data) {
  try {
    // 请求用户选择临时文件保存位置（可预设系统临时目录）
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'temp_data.txt',
      types: [{ description: '文本文件', accept: { 'text/plain': ['.txt'] } }]
    });
    // 写入数据到文件
    const writable = await fileHandle.createWritable();
    await writable.write(data);
    await writable.close();
    // 传递文件路径（不同浏览器返回格式需程序适配）
    const filePath = fileHandle.name;
    const protocolUrl = `${protocolPrefix}?filePath=${encodeURIComponent(filePath)}`;
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = protocolUrl;
    document.body.appendChild(iframe);
    setTimeout(() => document.body.removeChild(iframe), 500);
  } catch (err) {
    console.error('临时文件创建失败:', err);
    // 降级到剪贴板或分块传输
    sendDataViaClipboard(protocolPrefix, data);
  }
}

// 使用示例
const largeData = "你的大段数据内容...";
sendDataViaTempFile('mycustomprotocol', largeData);

注意：

• File System Access API仅支持Chrome、Edge等现代浏览器；
• 在file://协议下使用需开启浏览器特定权限（如Chrome的--allow-file-access-from-files参数）；
• 目标程序需根据路径读取对应文件内容。

内容的提问来源于stack exchange，提问作者FDavidov