Got it, let's walk through how to make this work. The key here is that you can't directly write to a Google Doc from frontend JavaScript (browser security blocks cross-origin requests), so we'll use Google Apps Script as a simple backend bridge between your HTML pages and the Google Doc. Here's a step-by-step plan:

First, we need a script that can accept data from your main.html, write it to the Google Doc, and serve the doc's content to view.html.

• Open your public Google Doc, then go to Extensions > Apps Script to open the script editor.
• Replace the default Code.gs content with this:

// Replace with your Google Doc ID (found in the doc's URL between /d/ and /edit)
const DOC_ID = "YOUR_DOCUMENT_ID_HERE";

// Handle POST requests from main.html (write to doc)
function doPost(e) {
  try {
    const content = e.parameter.content;
    if (!content) throw new Error("No content provided");
    
    const doc = DocumentApp.openById(DOC_ID);
    // Clear existing content and add the new selection (change to appendParagraph if you want to keep old content)
    doc.getBody().clear();
    doc.getBody().appendParagraph(content);
    
    return ContentService.createTextOutput(JSON.stringify({success: true}))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({success: false, error: error.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

// Handle GET requests from view.html (read from doc)
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 (error) {
    return ContentService.createTextOutput(JSON.stringify({success: false, error: error.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

• Replace YOUR_DOCUMENT_ID_HERE with the ID from your Google Doc's URL.
• Deploy this script as a web app:
  1. Click Deploy > New deployment.
  2. Click the gear icon > select Web app.
  3. Set Execute as to Me, and Who has access to Anyone, even anonymous (since your users are unlogged).
  4. Click Deploy, then authorize the script (you’ll need to bypass Google’s "unsafe app" warning by clicking Advanced > Go to [script name]).
  5. Copy the deployed web app URL (it’ll look like https://script.google.com/macros/s/.../exec). You’ll need this for your HTML pages.

Add an option selector (dropdown or buttons) and JavaScript to send the selected content to your Apps Script endpoint.

Example with a dropdown:

<!-- main.html -->
<select id="optionSelector">
  <option value="">Choose an option</option>
  <option value="Option 1: User picked the first choice">Option 1</option>
  <option value="Option 2: Second selection made">Option 2</option>
  <option value="Option 3: Third option was selected">Option 3</option>
</select>
<button id="submitBtn">Save Selection</button>

<script>
const submitBtn = document.getElementById('submitBtn');
const selector = document.getElementById('optionSelector');
const scriptUrl = 'YOUR_DEPLOYED_WEB_APP_URL_HERE'; // Replace with your script URL

submitBtn.addEventListener('click', async () => {
  const selectedContent = selector.value;
  if (!selectedContent) {
    alert('Please select an option first!');
    return;
  }
  
  try {
    await fetch(scriptUrl, {
      method: 'POST',
      mode: 'no-cors', // Required for cross-origin requests
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `content=${encodeURIComponent(selectedContent)}`,
    });
    alert('Selection saved successfully!');
    selector.value = ''; // Reset the selector
  } catch (error) {
    alert('Failed to save selection: ' + error.message);
  }
});
</script>

If you prefer buttons instead of a dropdown, replace the select element with buttons that have data-content attributes, then add click listeners to grab their data values.

Add JavaScript to load the latest content from the Google Doc when the page loads or refreshes.

<!-- view.html -->
<div id="contentDisplay">Loading content...</div>

<script>
const scriptUrl = 'YOUR_DEPLOYED_WEB_APP_URL_HERE'; // Same script URL as main.html
const contentDisplay = document.getElementById('contentDisplay');

async function loadContent() {
  try {
    const response = await fetch(scriptUrl);
    const data = await response.json();
    
    if (data.success) {
      contentDisplay.textContent = data.content || 'No content has been saved yet.';
    } else {
      contentDisplay.textContent = 'Error loading content: ' + data.error;
    }
  } catch (error) {
    contentDisplay.textContent = 'Failed to load content: ' + error.message;
  }
}

// Load content on page load and refresh
window.addEventListener('load', loadContent);
</script>

• Rate Limits: Google Apps Script has free-tier limits (like 1000 requests per day), so keep that in mind if you expect high traffic.
• Rich Formatting: The example uses plain text. If you need to preserve formatting (bold, links, etc.), modify the Apps Script to handle rich text instead of just getText().
• Basic Security: Since the web app is open to anyone, consider adding validation in the doPost function (e.g., check if the submitted content matches your allowed options) to prevent spam.

Give this a try—start with the Apps Script setup, then test each HTML page one by one. Let me know if you hit any roadblocks!

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