Question

我有这个用HTML创建的表单（称为form.html），用google apps脚本编写，我也有一个样式表（CSS）。当我在与表单相同的HTML文件中使用CSS时，一切运行良好。但是，如果我想将样式表放在单独的HTML文件（称为Stylesheet.html）中，然后使用scriplet将其包含在form.html中

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

甚至创建＆＃39; include＆＃39;功能：

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

然后在form.html

<?!= include(Stylesheet) ?>

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

到目前为止，这是代码......

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

<?!= 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>

＆＃13;

CSS IN form.html

的结果

css in form.html

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

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

CSS on Stylesheet.html

Answer 1

您正确地做到了这一点：

您的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>

你知道如果你的侧边栏或对话框看起来很像谷歌的东西 - 相同的字体，相同的文字大小，谷歌CSS正在工作。要将操作按钮设为蓝色，您需要为其添加适当的类class="action"。

为什么不工作？ ^{_{为面对面的时刻做好准备......}}

您正在使用Scriptlet，这是Html Service模板化HTML的一部分。它们需要解释，HtmlService.createHtmlOutputFromFile()不能解释。（这就是为什么你会逐字地看到scriptlet的原因。）

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

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

要显示以Google为主题的操作按钮，请添加Apps脚本CSS并添加＆＃34;操作＆＃34;类：

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

screenshot

Answer 2

如何命名它Stylesheet.css？并尝试通过标题中的普通HTML包含它。

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

HTH

未导入.html文档的样式表

2 个答案: