代码.gs
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Procard Tracking');
SpreadsheetApp.getUi().showSidebar(ui);
}
Sidebar.html
<style>
h2 {
margin-left: 10px;
color: #949494;
}
p {
margin: 20px 20px 0px 20px;
}
.form-style-7{
max-width:400px;
margin:50px auto;
background:#fff;
border-radius:2px;
padding:20px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 h1{
display: block;
text-align: center;
padding: 0;
margin: 0px 0px 20px 0px;
color: #5C5C5C;
font-size:x-large;
}
.form-style-7 ul{
list-style:none;
padding:0;
margin:0;
}
.form-style-7 li{
display: block;
padding: 9px;
border:1px solid #DDDDDD;
margin-bottom: 30px;
border-radius: 3px;
}
.form-style-7 li:last-child{
border:none;
margin-bottom: 0px;
text-align: center;
}
.form-style-7 li > label{
display: block;
float: left;
margin-top: -19px;
background: #FFFFFF;
height: 14px;
padding: 2px 5px 2px 5px;
color: #B9B9B9;
font-size: 14px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.form-style-7 input[type="text"],
.form-style-7 input[type="date"],
.form-style-7 input[type="datetime"],
.form-style-7 input[type="email"],
.form-style-7 input[type="number"],
.form-style-7 input[type="search"],
.form-style-7 input[type="time"],
.form-style-7 input[type="url"],
.form-style-7 input[type="password"],
.form-style-7 textarea,
.form-style-7 select
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display: block;
outline: none;
border: none;
height: 25px;
line-height: 25px;
font-size: 16px;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 input[type="text"]:focus,
.form-style-7 input[type="date"]:focus,
.form-style-7 input[type="datetime"]:focus,
.form-style-7 input[type="email"]:focus,
.form-style-7 input[type="number"]:focus,
.form-style-7 input[type="search"]:focus,
.form-style-7 input[type="time"]:focus,
.form-style-7 input[type="url"]:focus,
.form-style-7 input[type="password"]:focus,
.form-style-7 textarea:focus,
.form-style-7 select:focus
{
}
.form-style-7 li > span{
background: #F3F3F3;
display: block;
padding: 3px;
margin: 0 -9px -9px -9px;
text-align: center;
color: #C0C0C0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.form-style-7 textarea{
resize:none;
}
.form-style-7 input[type="submit"],
.form-style-7 input[type="button"]{
background: #2471FF;
border: none;
padding: 10px 20px 10px 20px;
border-bottom: 3px solid #5994FF;
border-radius: 3px;
color: #D2E2FF;
}
.form-style-7 input[type="submit"]:hover,
.form-style-7 input[type="button"]:hover{
background: #6B9FFF;
color:#fff;
}
</style>
<body>
<h2>Instructions</h2>
<p>Fill out the spreadsheet receipt information before filling out this section.</p>
<form class="form-style-7">
<ul>
<li>
<label for="statment_date">Statement Date</label>
<input id ="statementdate" type="date" name="statment_date">
<span></span>
</li>
<li>
<label for="cardholders">CardHolder</label>
<select id="cardholders" name="cardholders">
</select>
<span></span>
</li>
<li>
<label for="prepared_by">Prepared By</label>
<input id="prepared_by"type="text" name="prepared_by" maxlength="100">
<span>If different from CardHolder</span>
</li>
<li>
<label for="total_activity">Total Activity</label>
<input id="totalactivity" type="text" name="total_activity" maxlength="100">
<span></span>
</li>
<li>
<input id="submit_button" type="submit" value="Submit" onclick="submitForm()">
<progress id="progress_bar" style="display: none; margin: auto;"></progress>
<div id="finished" style="display: none; margin: auto;">
<p style="font-size:22px; color: Green;">Ready to Print</p>
<p style="font-size:16px; padding-top: 0px;">Go to File -> Print</p>
<p style="font-size:12px; margin: 0px; padding: 0px;">(In the top left corner)</p>
</div>
</li>
</ul>
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
window.onload = setCardHolders();
function setCardHolders() {
google.script.run
.withSuccessHandler(function(cardHolders) {
fillCardHoldes(cardHolders);
})
.withFailureHandler(function(error) {
alert(error.message);
})
.withUserObject(this)
.getCardHolders();
}
function fillCardHoldes(cardHolders) {
var selectCardHolders = document.getElementById("cardholders");
for(var i = 1; i < cardHolders.length; i++) {
if (!isEmpty(cardHolders[i][0])) {
var newOption = document.createElement("option");
newOption.value = i+1;
newOption.innerHTML = cardHolders[i][0];
selectCardHolders.options.add(newOption);
}
}
}
function isEmpty(str) {
return (!str || 0 === str.length);
}
function submitForm() {
var todaysDateString = new Date().toString();
var statmentDate = new Date(document.getElementById("statementdate").value + " GMT-0800");
var cardHolderDrop = document.getElementById("cardholders");
var cardHolderRow = Number(cardHolderDrop.options[cardHolderDrop.selectedIndex].value);
var preparedBy = document.getElementById("prepared_by").value;
var totalActivity = Number(document.getElementById("totalactivity").value)
google.script.run
.withSuccessHandler(function(result) {
if (result) {
submitSuccessful();
} else {
alert("An error has occurred please contact spreadsheet owner.");
}
})
.withFailureHandler(function(error) {
submitFailed(error);
})
.withUserObject(this)
.submitted(todaysDateString, formatDate(statmentDate), parseInt(cardHolderRow), parseFloat(totalActivity), preparedBy);
document.getElementById("submit_button").style.display = 'none';
document.getElementById("progress_bar").style.display = 'block';
}
function submitSuccessful() {
document.getElementById("submit_button").style.display = 'inline';
document.getElementById("submit_button").value = "Resubmit"
document.getElementById("progress_bar").style.display = 'none';
document.getElementById("finished").style.display = 'inline';
}
function submitFailed(error) {
document.getElementById("submit_button").style.display = 'inline';
document.getElementById("progress_bar").style.display = 'none';
document.getElementById("finished").style.display = 'inline';
document.getElementById("finished_info").innerHtml = "<p style=\"font-size:18px; color: Red;\">Failed</p><p>Please Contact Spreadsheet owner.</p> <p>" + error.message + "</p>";
}
function formatDate(date) {
return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear()
}
</script>
一周前，这一切都运行得很好，直到这些出现之前我才碰过它。输入类型日期显示了一个下拉日历，提交按钮可以正常工作并隐藏并显示 html 元素。这无需设置沙盒模式。但是现在，日期类型的statement_date 输入不再显示下拉日历。除非我将侧边栏的沙盒模式设置为 IFRAME。这很好，但是当点击提交按钮时，整个侧边栏变成空白，并且里面没有任何 html 内容。然而，JavaScript 仍然可以正常运行，只是侧边栏变成空白。
最佳答案
您正在提交到一个空页面，这就是为什么它变得全部空白，使用下面的代码禁用提交按钮，并让您自己的代码处理提交:
$('form button').on("click",function(e){
e.preventDefault;
});
并且使用 IFRAME，它要好得多(除非您想将文件发送到服务器)。
关于javascript - Google 应用程序脚本侧边栏因 onclick 而变成空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28996163/