如何将一段HTML代码插入到所需位置的现有html页面？ （HtmlService.createHtmlOutputFromFile））

Question

function showDialog(myHtmlCode) {
  var html = HtmlService.createHtmlOutputFromFile('index.html')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(800)
      .setHeight(600)
      .append(myHtmlCode); // By default it embeds the code to the end of the index.html

  SpreadsheetApp.getUi().showModalDialog(html, '...');
}

例如，我如何将 span 插入index.html中的 div ？

Answer 1

1. 在html文件中：

<header class="mdl-layout__header">
  <div class="mdl-layout__header-row">
    <?=myContent ?>
  </div>
</header>

1. 在gs文件中：

function showDialog(myHtmlCode) {

  var template = HtmlService.createTemplateFromFile('index.html')     // HTML Service: Templated HTML
  template.myContent = myHtmlCode;                                         // Put our html to the prepared place in our html file.
  var modifiedHtml = template.evaluate().getContent();                     // Get modified html raw content.

// You need to replace escape characters to the standard markup because Google automatically adds escape characters to protect against cross-site scripting (XSS) attacks
  var modifiedHtml = modifideHtml.replace(/(&lt;)/ig, "<");
  var modifiedHtml = modifideHtml.replace(/(&gt;)/ig, ">");
  var modifiedHtml = modifideHtml.replace(/(&#34;)/ig, '"');
  var modifiedHtml = modifideHtml.replace(/(&#43;)/ig, "+");

  var html = HtmlService.createHtmlOutput(modifideHtml)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(800)
      .setHeight(600);

  SpreadsheetApp.getUi().showModalDialog(html, '...');
}