Splitting HTML dialogs into Dialog.html + Styles.html + Client.js.html keeps IFRAME UIs maintainable. The classic pattern is a server-side include called from scriptlets.
What you'll need
- HTML files in the Apps Script project (
File > New > HTML) - A template that calls
<?!= includeHtml('OtherFile'); ?>(force-print, unescaped)
How to use this snippet
function includeHtml(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function openIframeDialog(title, width, height) {
var html = HtmlService.createTemplateFromFile('Dialog')
.evaluate()
.setWidth(width || 480)
.setHeight(height || 360);
SpreadsheetApp.getUi().showModalDialog(html, title || 'Dialog');
}
In Dialog.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= includeHtml('Styles'); ?>
</head>
<body>
<h1>Hello</h1>
<?!= includeHtml('Client'); ?>
</body>
</html>
Tips:
- Use
<?!= ... ?>(not<?=) so CSS/JS aren't HTML-escaped. - Sandbox is
IFRAMEby default now — keep client JS in its own included file for clarity.
Happy Coding!
