未导入.html文档的样式表 [英] Stylesheet for .html document not imported
问题描述
我有我用Google Apps脚本编写的HTML格式(称为form.html)创建的表单，也有一个样式表(CSS).当CSS与表单位于相同的HTML文件中时，一切工作正常.但是，如果我想将样式表放在单独的HTML文件(称为Stylesheet.html)中，然后使用脚本将其包含在form.html中
I have this form I created in HTML (called form.html) written in google apps script and I also have a stylesheet (CSS) to go with that. All is working well when I have the CSS in the same HTML-file as the form. However if I want to put my stylesheet in a separate HTML-file (called Stylesheet.html) and then include it in the form.html by using a scriplet
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
甚至创建一个包含"功能:
or even creating an 'include' function:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
，然后输入form.html
and then in form.html
<?!= include(Stylesheet) ?>
..它似乎不起作用.更糟糕的是，该摘要显示在表单上. 也许我忽略了一些基本的东西，但是我无法解决这个问题.有什么想法吗?
..it doesn't seem to work. What's even worse the scriplet shows up on the form. Maybe there is something basic I am overlooking, but I can't wrap my head around this. Any ideas ?
这是到目前为止的代码...
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
The result with CSS IN the form.html
，这是单独的.html文件中的CSS，其中包括 在
and here is the CSS in a separate .html file and included in form.html with
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
推荐答案
您正在这样做:
您的css文件必须是HTML文件，因为它们是HtmlService支持的唯一类型.如果您查看入门脚本，则会发现它们具有Stylesheet.html，内容:
Your css file must be an HTML file, as those are the only type supported by HtmlService. If you look at the starter scripts, you'll find that they have Stylesheet.html, with content:
<!-- 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="action".
You know the google css is working if your sidebar or dialog looks pretty much like google stuff - same font, same text size. To have an action button be blue, you need to add the appropriate class to it, class="action".
您的为什么不工作? 准备好面对面的时刻...
您正在使用scriptlet，它是Html Service模板化HTML的一部分.它们需要解释，而HtmlService.createHtmlOutputFromFile()则不执行. (这就是为什么您会在字面上看到scriptlet行的原因.)
You're using scriptlets, part of the Html Service templated HTML. They require interpretation, which is not done by HtmlService.createHtmlOutputFromFile(). (That's why you see the scriptlet line literally.)
相反，您需要读取包含scriptlet的文件作为 template ，然后.evaluate()读取它.
Instead, you need to read the file containing scriptlets as a template, and then .evaluate() it.
function doGet() {
return HtmlService.createTemplateFromFile('form')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
要显示以谷歌为主题的操作按钮，请包含Apps脚本CSS并添加操作"类:
To display the google-themed action button, include the Apps Script CSS and add "action" class:
<input type="submit" id="verzenden" name="verzenden" class="action verzenden" value="Reservatie verzenden" >
这篇关于未导入.html文档的样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
