Google Apps 脚本模式窗口 HTML - 链接的 href 问题答案

【问题标题】：Google Apps Script modal window HTML - link's href issueGoogle Apps 脚本模式窗口 HTML - 链接的 href 问题
【发布时间】：2020-08-05 14:38:15
【问题描述】：

我在使用 Google Apps 脚本模式窗口 HTML 解析机制时遇到了一些奇怪的问题。

最小可复制示例：

var ui = SpreadsheetApp.getUi();

var template = HtmlService.createTemplateFromFile('html/test');

var html = template.evaluate().setWidth(1920).setHeight(1080);
ui.showModalDialog(html, 'Test');

html/test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://test.com/#gid=0&range=A1:B1" target="_blank">https://test.com/#gid=0&range=A1:B1</a>
</body>
</html>

模式窗口中的预期输出：指向https://test.com/#gid=0&range=A1:B1 的链接。

实际链接意外指向不同的 URL：https://test.com/#gid=0%E2%A6%A5=A1:B1。

Google Chrome 开发者工具显示下一个链接的 HTML：

<a href="https://test.com/#gid=0⦥=A1:B1" target="_blank">https://test.com/#gid=0&amp;range=A1:B1</a>

为什么链接的href 会被覆盖？有什么办法可以让 Google Apps 脚本按原样显示链接？

【问题讨论】：

标签： javascript html url google-apps-script

【解决方案1】：

试试这个方法：

gs:

function displayMyDialog() {
  var ui = SpreadsheetApp.getUi();
  var template = HtmlService.createTemplateFromFile('ah3');//my html file name
  var html = template.evaluate().setWidth(1200).setHeight(450);//change to fit my window
  ui.showModalDialog(html, 'Test');
}

将&amp; 替换为&amp;

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://test.com/#gid=0&amp;range=A1:B1" target="_blank">https://test.com/#gid=0&amp;range=A1:B1</a>
</body>
</html>

老实说，我不记得我在哪里学到的。

【讨论】：

谢谢，确实有帮助。假设初始行为是 Apps Script 的错误，请在此处报告：issuetracker.google.com/issues/162919947
@Kos 就我个人而言，我不认为它会被视为应用程序脚本错误。它只是归结为如何知道对 html 进行 url 编码。
那么，这绝对是我见过的最有创意的 html 属性编码方式，向应用脚本团队致敬。希望有一天我们会看到 encoded 输出的解码器）
我很久以前就学会了。在应用程序脚本之前。