.html 文档的样式表未导入

Question

我在 HTML（称为 form.html）中创建了这个表单，用 google 应用程序脚本编写，我还有一个样式表（CSS）可以使用那。当我在与表单相同的 HTML 文件中拥有 CSS 时，一切正常。但是，如果我想将我的样式表放在一个单独的 HTML 文件中（称为 Stylesheet.html），然后使用 scriplet

将其包含在 form.html 中

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

甚至创建一个 'include' 函数：

function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .getContent();
  }

然后在 form.html

<?!= include(Stylesheet) ?>

..它似乎不起作用。更糟糕的是，scriplet 出现在表格上。也许我忽略了一些基本的东西，但我无法解决这个问题。有什么想法吗？

这是目前为止的代码...

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Formulier')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

function materiaalLijst(afdnum) {
 return SpreadsheetApp.openById('1l6MKG61GHMFSZrOg04W4KChpb7oZBU9VKp42FPXmldc')
        .getSheetByName('RESERVATIE')
        .getDataRange()
        .getValues()
        .map(function (v) {
            return v[Number(afdnum) - 1]
        })
        .splice(1);
 }


//work in progress
function processForm(form) {
    Logger (form); //array containing form elements
}

<style>

form {
    /* Just to center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}


form div + div {
    margin-top: 1em;
}
label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text field */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #000;
}

textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 5em;

    /* To allow users to resize any textarea vertically
       It does not work on every browsers */
    resize: vertical;
}

</style>

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>


<form id="myForm">
    <!-- Text input field -->
    <div>
        <label for="name">Naam:</label>
        <input type="text" id="name" placeholder="Voornaam + naam" required>
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" required>
    </div>
    <div>
        <label for="Afdeling">Afdeling:</label>
        <input type="radio" id="1" name="Afd" value="Oostende">Oostende
        <input type="radio" id="2" name="Afd" value="Brugge">Brugge
        <input type="radio" id="3" name="Afd" value="Westhoek">Westhoek
    </div>
    <div>
        <label for="datepicker">Datum:</label>
        <input type="date" id="resdatum" required>
    </div>
    <div>
        <label for="timepicker">Uur:</label>
        <input type="time" id="restijd" required>
    </div>
    <div>
        <label for="Frequentie">Frequentie:</label>
        <input type="radio" name="freq" value="éénmalig" required>éénmalig
        <input type="radio" name="freq" value="meermaals">voor meerdere weken
    </div>
    <div>
        <label for="Materiaal">Materiaal:</label>
        <select id="materiaal" name="materiaalselectie" required>
            <option value="notSel">Kies..</option>
        </select>
    </div>
    <div>
        <!-- The submit button. It calls the server side function uploadfiles() on click -->
        <input type="submit" id="verzenden" name="verzenden" class="verzenden" value="Reservatie verzenden" >
    </div>
    
    <div id="output"></div>

</form>

 <div id="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    

    $("input:radio[name=Afd]").click(function() {
        go(this.id);
    });

    function go(idAfd) {
        google.script.run.withSuccessHandler(showList).materiaalLijst(idAfd);
    }

    function showList(things) {
        var list = $('#materiaal');
        list.empty();
        for (var i = 0; i < things.length; i++) {
            list.append('<option value="' + things[i] + '">' + things[i] + '</option>');
        }
    }

 //below is work in progress...
 
   $('#myForm').submit(function(e) {
    e.preventDefault(); 
   var arr =[];
   
     //var fields = $( ":input" ).serializeArray();
    $.each( $( ":input" ).serializeArray(), function( i, field ) {
      arr.push( field.value);
    });
    var json = JSON.stringify($('#myForm').serializeArray());
    google.script.run.processForm(arr);
    alert(arr);
    })
 
   
</script>

结果同CSS IN form.html

这里是单独的 .html 文件中的 CSS 并包含在内在 form.html 和

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

Answer 1

如何命名它 Stylesheet.css？并尝试通过正常 HTML 将其包含在 header.

中

<link rel="stylesheet" href="Stylesheet.css" type="text/css">

HTH

Answer 2

你做对了：

您的 css 文件必须是 HTML 文件，因为这些是 HtmlService 唯一支持的类型。如果您查看入门脚本，您会发现它们有 Stylesheet.html，内容为：

<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
...
</style>

如果您的侧边栏或对话框看起来很像 google 东西——相同的字体，相同的文本大小，您就知道 google css 正在工作。要使操作按钮为蓝色，您需要向其添加适当的 class，class="action"。

为什么你的不工作？ ^{_{准备好拍脸...}}

您正在使用 scriptlet，它是 Html 服务模板化 HTML 的一部分。它们需要解释，HtmlService.createHtmlOutputFromFile() 不会这样做。（这就是为什么您会从字面上看到 scriptlet 行的原因。）

相反，您需要将包含 scriptlet 的文件作为模板读取，然后 .evaluate() 它。

function doGet() {
  return HtmlService.createTemplateFromFile('form')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

要显示 google 主题的操作按钮，请包含 Apps 脚本 CSS 并添加 "action" class:

<input type="submit" id="verzenden" name="verzenden" class="action verzenden" value="Reservatie verzenden" >

.html 文档的样式表未导入

Stylesheet for .html document not imported

web-applications

google-apps-script