Google Sites搜索框可获取数据但网页不显示问题求助

我在Google Sites中嵌入了一个搜索框，输入号码后可检索两个Google Sheets中的数据。目前搜索执行正常，云端已成功获取数据，但结果无法在网页上显示。

现有代码 #

code.gs #

function searchSheets(contactNumber) {
var oldSheetId = '15cX2CuPCic21X4v2twgfLWi6_FN455tWyPORZUieqPk';
var newSheetId = '1VC6L6e-xMQ2CTbLR8SSOMug6GxqWPATcCtaVgUSll54';

var oldSheet = SpreadsheetApp.openById(oldSheetId).getSheetByName('OLD');
var newSheet = SpreadsheetApp.openById(newSheetId).getSheetByName('2024');

var oldData = oldSheet.getDataRange().getValues();
var newData = newSheet.getDataRange().getValues();

var combinedData = oldData.concat(newData);

var filteredData = combinedData.filter(function(row) {
return row[5].toString() === contactNumber.toString();
  });

Logger.log('Filtered Data: ' + JSON.stringify(filteredData));

return filteredData;
}

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}

index.html #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
function searchContact() {
const contactNumber = document.getElementById('contactNumber').value;
google.script.run.withSuccessHandler(displayResults).searchSheets(contactNumber);
    }

function displayResults(data) {
console.log('Received data:', data); // Add this for debugging
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = ''; // Clear previous results

if (data.length === 0) {
resultsDiv.innerHTML = '<p>No results found.</p>';
return;
      }

const table = document.createElement('table');
table.border = 1;

const headers = [
        'Timestamp', 'Submitted By', 'Type of Request', 'Update For (LM Name/Team Name)', 
        'Customer Name', 'Customer Mobile No', 'Query Type', 'Lead Number', 
        'Remarks', 'Source Name', 'Location Name'
      ];

const headerRow = document.createElement('tr');
headers.forEach(header => {
const th = document.createElement('th');
th.appendChild(document.createTextNode(header));
headerRow.appendChild(th);
      });
table.appendChild(headerRow);

data.forEach(row => {
const rowElement = document.createElement('tr');
row.forEach(cell => {
const cellElement = document.createElement('td');
cellElement.appendChild(document.createTextNode(cell));
rowElement.appendChild(cellElement);
        });
table.appendChild(rowElement);
      });

resultsDiv.appendChild(table);
    }
  </script>
</head>
<body>
<h1>Search Contacts</h1>
<label for="contactNumber">Contact Number:</label>
<input type="text" id="contactNumber">
<button onclick="searchContact()">Search</button>
<div id="results"></div>
</body>
</html>

执行日志（已成功获取数据） #

问题排查与解决方案 #

1. 核心问题：嵌入权限限制 #

Google Apps Script的HtmlService默认禁止在外部域名下嵌入页面，而Google Sites属于跨域环境，导致页面内的google.script.run无法正常完成前后端通信——即使后端获取到数据，也无法传递到前端渲染。

修复方法：修改doGet函数，添加允许跨域嵌入的配置：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

2. 优化数据匹配兼容性 #

用户输入的号码可能包含空格、加号等格式字符，当前严格的字符串匹配可能导致潜在的不匹配问题，建议优化过滤逻辑：

var filteredData = combinedData.filter(function(row) {
  // 去除两端空格后再比较，兼容不同输入格式
  return row[5].toString().trim() === contactNumber.toString().trim();
});

3. 前端空值处理优化 #

如果Sheet中存在空单元格，前端会显示null或undefined，可修改前端代码优化显示效果：

// 替换原单元格内容渲染行
cellElement.appendChild(document.createTextNode(cell || ''));

4. 调试验证步骤 #

在浏览器中打开嵌入的页面，按F12打开开发者工具，切换到Console标签：

• 查看是否有报错信息，确认google.script.run是否被正常执行
• 检查Received data:日志是否输出，判断数据是否成功传递到前端

内容的提问来源于stack exchange，提问作者bproperty Customer Service