![](/img/trans.png)
[英]How to modify html file before HTMLOutput in Google Apps Script
[英]Using Apps Script to manipulate the html content in HtmlOutput
我正在使用Apps Script
并尝试在Google Sheet
中创建一个Sidebar
,以显示将内容转换为JSON
的结果。
这是页面Sidebar
的html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
.width-100 {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<form>
<div class="block form-group">
<label for="json"><b>JSON</b></label>
<textarea class="width-100" id="json" name="json" rows="10"></textarea>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</body>
</html>
我之前已经创建了所需的JSON
,现在正尝试使用此方法使用创建的JSON
设置textarea
的内容:
function displayText_(text) {
var html = HtmlService.createHtmlOutputFromFile('Sidebar')
.setTitle('JSON Results');
var contents = html.getContent();
contents.getElementById('json').setText(text);
html.setContent(contents);
SpreadsheetApp.getUi().showSidebar(html);
}
这是用于答案的样本JSON
字符串:
var jsonString = {"someKey":"someValue","anotherKey":"anotherValue"}
我尝试通过连接到html
和contents
来使用getElementById
(我当前的方法)。 什么都不会产生预期的结果。 我猜这很简单,但是不知道如何从Apps Script
操纵html。
我很确定我可以在Apps Script
创建整个html内容并替换其中的内容,但这是一个hack,不容易维护。
有没有更简单的方法可以做到这一点?
据我了解,您要实现的目标是在客户端从服务器端注入内容。 函数displayText_
是服务器端函数。
如果是这样,您可以将服务器端功能更改为看起来像这样的功能:(代替简单的客户端文件,我们将使用模板文件)
function displayText_(text) {
var htmlTemplate = HtmlService.createTemplateFromFile('Sidebar');
htmlTemplate.json = text;
var html = htmlTemplate.evaluate().setTitle('JSON Results');
SpreadsheetApp.getUi().showSidebar(html);
}
然后在客户端,您需要进行更改
<textarea class="width-100" id="json" name="json" rows="10"></textarea>
对于
<textarea class="width-100" id="json" name="json" rows="10"><?!=json?></textarea>
如果您想进行动态更改,则应在此处查看客户端/服务器的通信过程
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.