如何在显示为对话框的 HTML 文件中包含全局样式/javascript？答案

【问题标题】：How do I include global styles/javascript in HTML files displayed as dialogs?如何在显示为对话框的 HTML 文件中包含全局样式/javascript？
【发布时间】：2017-03-25 20:36:37
【问题描述】：

我正在开发一个 Google App Script 项目，该项目将直接在 Google Sheet 中使用，HTML 文件作为对话框。我的项目将混合 .gs 文件以及用于数据输入的 HTML 文件等。我正在尝试使用此处解释的方法：

https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript

创建可以包含在 HTML 文件中的全局 JavaScript 和 CSS 模块，而不是到处剪切和粘贴内联代码。这将主要用于数据保存例程，这些例程捕获表单数据，对其进行序列化，然后通过此处（以及许多其他地方）概述的方法将其保存到表格：http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/。

我遇到的问题是尝试从我的 HTML 文件中调用“包含”语句，即如下行：

<?!= include('JavaScript'); ?>

当我在电子表格上创建一个菜单以将我的 HTML 文件显示为对话框时，它不起作用 - 包含行的文本只是在对话框中显示为文字输出，并且代码似乎没有得到包括（不在范围内）。

我知道 Google 示例主要是针对通过网络应用程序开发的页面，但我想将我的 HTML 文件用作电子表格内的对话框（例如，从菜单或侧边栏）——这感觉很好而且很整洁我。但是如果我不能让包含工作，我的代码库将是一场噩梦，在整个应用程序中标准化 CSS 将非常非常困难。我不想一直剪切和粘贴。

那么，<?! 标签背后的秘密是什么，为什么当它们被称为对话框时它在我的 HTML 文件中不起作用？很明显，这些行与一开始就不同（也许不是坏事，但它们不起作用），因为 Google 脚本控制台奇怪地显示这些行，如下面的屏幕截图所示：

【问题讨论】：

标签： javascript html css google-apps-script include

【解决方案1】：

请尝试添加：

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

更多信息可以在Adding Style Sheets找到。

【讨论】：

恐怕我看不出这会有什么帮助。如果我尝试将该行添加到我尝试显示为对话框的 HTML 文件中，它在代码窗口中仍然具有不同的格式，并且没有任何变化。在我看来，<? 标签在显示为带有showModalDialog() 的对话框的 HTML 文件中无法正常运行。
现在我已经弄清楚如何让对话框动态构建 <?> 作品。因此，当我进一步深入研究将样式表正确添加到我的项目时，您的评论是适用的。谢谢！

【解决方案2】：

想通了。我没有正确理解 HTML 作为对话框提供的方式。我在自定义菜单选项后面使用它：

var html = HtmlService.createHtmlOutputFromFile(htmlFileName);

当我应该使用更动态的时候：

var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();

后者生成一个用户界面对象，在该对象中执行服务器端脚本，当我使用showModalDialog()（或showSidebar()）显示该对象时，所有内容都正确包含在内。

我只是完全误解了用户界面对象是如何创建的，所以现在所有脚本都在我的 HTML 文件中工作。

【讨论】：