如何仅通过前端HTML与JavaScript实现对公开可编辑Google文档的读写交互？

嘿，这个需求其实可以通过 Google Apps Script 做中间代理层来实现——毕竟纯前端直接操作Google Docs会碰到跨域和权限限制的问题，下面是一步步的具体实现方案：

因为浏览器的同源策略限制，前端无法直接调用Google Docs API，所以我们需要用Google Apps Script创建一个简单的Web应用，作为读写Google文档的中间桥梁，然后让main.html和view.html通过这个Web应用来完成数据交互。

第一步：准备Google文档并获取ID #

1. 打开你的公开可编辑Google文档，复制地址栏里的文档ID（比如https://docs.google.com/document/d/ABC123XYZ/edit中的ABC123XYZ）。
2. 确保文档的权限设置为「任何人都可以编辑」（至少要保证你的Google账号能编辑它，因为后续Web应用会用你的账号访问文档）。

第二步：创建Google Apps Script代理 #

1. 打开Google Drive，新建一个「Google Apps Script」项目。
2. 替换默认的Code.gs代码为以下内容，记得把DOC_ID替换成你刚才复制的文档ID：

const DOC_ID = '你的Google文档ID';

// 处理写入请求（接收main.html的内容并写入文档）
function doPost(e) {
  try {
    const content = e.parameter.content;
    if (!content) throw new Error('缺少要写入的内容');
    
    const doc = DocumentApp.openById(DOC_ID);
    const body = doc.getBody();
    // 这里选择覆盖文档内容，如果需要追加可以删掉body.clear()，换成body.appendParagraph('\n' + content)
    body.clear();
    body.appendParagraph(content);
    
    return ContentService.createTextOutput(JSON.stringify({success: true}))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({success: false, error: err.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

// 处理读取请求（返回文档内容给view.html）
function doGet() {
  try {
    const doc = DocumentApp.openById(DOC_ID);
    const content = doc.getBody().getText();
    
    return ContentService.createTextOutput(JSON.stringify({success: true, content: content}))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({success: false, error: err.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

3. 部署Web应用：点击右上角「部署」→「新建部署」，选择「Web应用」类型，设置：
   • 执行权限：「我自己」
   • 谁可以访问：「任何人，甚至匿名」
4. 部署完成后，复制生成的Web应用URL（比如https://script.google.com/macros/s/XXXX/exec），后续页面要用到它。

第三步：实现main.html的写入功能 #

在main.html里添加选项选择器，通过fetch请求把选中的内容发送到Web应用：

<!DOCTYPE html>
<html>
<head>
  <title>写入文档</title>
</head>
<body>
  <h1>选择内容写入文档</h1>
  <select id="contentPicker">
    <option value="">请选择一个选项</option>
    <option value="这是选项A的内容">选项A</option>
    <option value="这是选项B的内容">选项B</option>
    <option value="这是选项C的内容">选项C</option>
  </select>
  <button onclick="sendContent()">写入文档</button>
  <p id="statusTip"></p>

  <script>
    const WEB_APP_URL = '你的Google Apps Script Web应用URL';

    function sendContent() {
      const picker = document.getElementById('contentPicker');
      const content = picker.value;
      const statusEl = document.getElementById('statusTip');

      if (!content) {
        statusEl.textContent = '请先选择一个选项哦';
        return;
      }

      fetch(WEB_APP_URL, {
        method: 'POST',
        mode: 'no-cors', // 避免跨域问题，因为Web应用允许匿名访问
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `content=${encodeURIComponent(content)}`
      })
      .then(() => {
        statusEl.textContent = '内容已成功写入文档！';
        picker.value = '';
      })
      .catch(err => {
        statusEl.textContent = '写入失败：' + err.message;
      });
    }

    // 可选：监听选择器变化自动写入，不用点按钮
    // document.getElementById('contentPicker').addEventListener('change', function() {
    //   if (this.value) sendContent();
    // });
  </script>
</body>
</html>

第四步：实现view.html的读取功能 #

在view.html里通过fetch请求获取文档内容并展示：

<!DOCTYPE html>
<html>
<head>
  <title>查看文档内容</title>
</head>
<body>
  <h1>文档最新内容</h1>
  <div id="docContent" style="white-space: pre-wrap; margin: 20px 0;"></div>
  <button onclick="refreshContent()">刷新内容</button>

  <script>
    const WEB_APP_URL = '你的Google Apps Script Web应用URL';

    // 页面加载时自动读取内容
    window.onload = refreshContent;

    function refreshContent() {
      const contentEl = document.getElementById('docContent');
      contentEl.textContent = '正在加载...';

      fetch(WEB_APP_URL)
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          contentEl.textContent = data.content;
        } else {
          contentEl.textContent = '加载失败：' + data.error;
        }
      })
      .catch(err => {
        contentEl.textContent = '加载失败：' + err.message;
      });
    }
  </script>
</body>
</html>

• Google Apps Script的免费版有每日请求配额限制，个人使用完全足够，但如果是高频访问可能需要升级付费版。
• 如果需要保留文档历史而不是覆盖内容，可以修改Apps Script里的写入逻辑，比如用body.appendParagraph追加内容而不是body.clear()。
• 确保Web应用的部署设置正确，尤其是「谁可以访问」要选「任何人，甚至匿名」，否则前端请求会被拒绝。

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