Class HtmlOutput

HtmlOutput

ออบเจ็กต์ HtmlOutput ที่แสดงจากสคริปต์ได้ เนื่องจากข้อควรพิจารณาด้านความปลอดภัย สคริปต์จึงส่ง HTML ไปยังเบราว์เซอร์โดยตรงไม่ได้ แต่จะต้องทำความสะอาดผลิตภัณฑ์เพื่อไม่ให้เกิดการดำเนินการที่เป็นอันตราย คุณแสดง HTML ที่ผ่านการตรวจสอบดังต่อไปนี้ได้

function doGet() {
  return HtmlService.createHtmlOutput('<b>Hello, world!</b>');
}
โค้ดใน HtmlOutput อาจมี JavaScript และ CSS ที่ฝังไว้ (คือ JavaScript ฝั่งไคลเอ็นต์แบบมาตรฐานที่ควบคุม DOM ไม่ใช่ Apps Script) เนื้อหาทั้งหมดนี้จะอยู่ในแซนด์บ็อกซ์โดยใช้แซนด์บ็อกซ์ของ iframe ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำเกี่ยวกับข้อจำกัดของบริการ HTML

วิธีการ

วิธีการประเภทการแสดงผลรายละเอียดแบบย่อ
addMetaTag(name, content)HtmlOutputเพิ่มเมตาแท็กลงในหน้า
append(addedContent)HtmlOutputเพิ่มเนื้อหาใหม่ต่อท้ายเนื้อหาของ HtmlOutput นี้
appendUntrusted(addedContent)HtmlOutputเพิ่มเนื้อหาใหม่ต่อท้ายเนื้อหาของ HtmlOutput นี้ โดยใช้การ Escape ตามบริบท
asTemplate()HtmlTemplateส่งคืน HtmlTemplate ที่ได้รับการสนับสนุนโดย HtmlOutput นี้
clear()HtmlOutputล้างเนื้อหาปัจจุบัน
getAs(contentType)Blobแสดงผลข้อมูลภายในออบเจ็กต์นี้เป็น Blob ที่แปลงเป็นประเภทเนื้อหาที่ระบุ
getBlob()Blobแสดงผลข้อมูลภายในออบเจ็กต์นี้เป็น Blob
getContent()Stringรับเนื้อหาของ HtmlOutput นี้
getFaviconUrl()Stringรับ URL สำหรับแท็กลิงก์ไอคอน Fav ที่เพิ่มไว้ในหน้าเว็บโดยเรียกใช้ setFaviconUrl(iconUrl)
getHeight()Integerรับความสูงเบื้องต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม
getMetaTags()HtmlOutputMetaTag[]รับอาร์เรย์ของออบเจ็กต์ที่แสดงถึงเมตาแท็กที่เพิ่มลงในหน้าเว็บโดยการเรียกใช้ addMetaTag(name, content)
getTitle()Stringรับชื่อของหน้าเอาต์พุต
getWidth()Integerรับความกว้างเบื้องต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม
setContent(content)HtmlOutputตั้งค่าเนื้อหาของ HtmlOutput นี้
setFaviconUrl(iconUrl)HtmlOutputเพิ่มแท็กลิงก์สำหรับไอคอน Fav ในหน้าเว็บ
setHeight(height)HtmlOutputตั้งค่าความสูงเริ่มต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม
setSandboxMode(mode)HtmlOutputวิธีนี้จึงไม่ส่งผลใดๆ โดยก่อนหน้านี้ได้กำหนด sandbox mode ที่ใช้สำหรับสคริปต์ฝั่งไคลเอ็นต์
setTitle(title)HtmlOutputตั้งชื่อหน้าเอาต์พุต
setWidth(width)HtmlOutputตั้งค่าความกว้างเริ่มต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม
setXFrameOptionsMode(mode)HtmlOutputตั้งค่าสถานะส่วนหัว X-Frame-Options ของหน้า ซึ่งควบคุมการป้องกันการแย่งชิงการคลิก

เอกสารประกอบโดยละเอียด

addMetaTag(name, content)

เพิ่มเมตาแท็กลงในหน้า ระบบจะไม่สนใจเมตาแท็กที่รวมอยู่ในไฟล์ HTML ของ Apps Script อนุญาตเฉพาะเมตาแท็กต่อไปนี้เท่านั้น:

<meta name="apple-mobile-web-app-capable" content="..."/>
<meta name="google-site-verification" content="..."/>
<meta name="mobile-web-app-capable" content="..."/>
<meta name="viewport" content="..."/>
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

พารามิเตอร์

ชื่อTypeคำอธิบาย
nameStringค่าของแอตทริบิวต์ชื่อของเมตาแท็ก
contentStringค่าของแอตทริบิวต์เนื้อหาของเมตาแท็ก

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


append(addedContent)

เพิ่มเนื้อหาใหม่ต่อท้ายเนื้อหาของ HtmlOutput นี้ ใช้ตัวเลือกนี้สำหรับเนื้อหา จากแหล่งที่มาที่น่าเชื่อถือเท่านั้น เพราะไม่ได้กำหนดเป็นอักขระหลีก

// Log "<b>Hello, world!</b><p>Hello again, world.</p>"
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.append('<p>Hello again, world.</p>');
Logger.log(output.getContent());

พารามิเตอร์

ชื่อTypeคำอธิบาย
addedContentStringเนื้อหาที่จะต่อท้าย

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน

การขว้าง

Error — หาก HTML มีรูปแบบไม่ถูกต้อง

ดูเพิ่มเติม


appendUntrusted(addedContent)

เพิ่มเนื้อหาใหม่ต่อท้ายเนื้อหาของ HtmlOutput นี้ โดยใช้การ Escape ตามบริบท

เมธอดนี้จะ Escape เนื้อหาตามสถานะปัจจุบันของ HtmlOutput อย่างถูกต้อง เพื่อให้ผลลัพธ์เป็นสตริงที่ปลอดภัยที่ไม่ส่งผลกระทบต่อมาร์กอัปหรือด้านข้าง ใช้ตัวเลือกนี้แทนที่จะใช้ การเพิ่มต่อท้ายเมื่อใดก็ตามที่คุณเพิ่มเนื้อหาจากแหล่งที่มาที่ไม่น่าเชื่อถือ เช่น จากผู้ใช้ เพื่อหลีกเลี่ยงการอนุญาตให้แสดงข้อบกพร่องของการใช้สคริปต์ข้ามเว็บไซต์ (XSS) โดยไม่ได้ตั้งใจ ซึ่งเนื้อหาหรือมาร์กอัปที่คุณต่อท้ายทำให้มีการเรียกใช้โค้ดที่ไม่คาดคิด

// Log "<b>Hello, world!</b>&lt;p&gt;Hello again, world.&lt;/p&gt;"
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.appendUntrusted('<p>Hello again, world.</p>');
Logger.log(output.getContent());

พารามิเตอร์

ชื่อTypeคำอธิบาย
addedContentStringเนื้อหาที่จะต่อท้าย

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน

การขว้าง

Error — หาก HTML มีรูปแบบไม่ถูกต้องมาก

ดูเพิ่มเติม


asTemplate()

ส่งคืน HtmlTemplate ที่ได้รับการสนับสนุนโดย HtmlOutput นี้ เมธอดนี้ใช้เพื่อสร้างเทมเพลตอย่างค่อยเป็นค่อยไปได้ การเปลี่ยนแปลง HtmlOutput ในอนาคตจะส่งผลต่อเนื้อหาของ HtmlTemplate ด้วย

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
var template = output.asTemplate();

รีเทิร์น

HtmlTemplateHtmlTemplate ใหม่


clear()

ล้างเนื้อหาปัจจุบัน

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.clear();

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


getAs(contentType)

แสดงผลข้อมูลภายในออบเจ็กต์นี้เป็น Blob ที่แปลงเป็นประเภทเนื้อหาที่ระบุ วิธีนี้จะเพิ่มส่วนขยายที่เหมาะสมลงในชื่อไฟล์ เช่น "myfile.pdf" อย่างไรก็ตาม สมมติว่าส่วนของชื่อไฟล์ที่อยู่หลังเครื่องหมายจุดสุดท้าย (ถ้ามี) เป็นส่วนขยายที่มีอยู่แล้วซึ่งควรแทนที่ ดังนั้น "ShoppingList.12.25.2014" จะกลายเป็น "ShoppingList.12.25.pdf"

ดูโควต้ารายวันสำหรับ Conversion ได้ที่โควต้าสำหรับบริการของ Google โดเมน Google Workspace ที่สร้างใหม่อาจอยู่ภายใต้โควต้าที่เข้มงวดเป็นการชั่วคราว

พารามิเตอร์

ชื่อTypeคำอธิบาย
contentTypeStringประเภท MIME ที่จะแปลงเป็น สำหรับ Blob ส่วนใหญ่ 'application/pdf' เป็นตัวเลือกเดียวที่ใช้ได้ สำหรับรูปภาพในรูปแบบ BMP, GIF, JPEG หรือ PNG คุณสามารถใช้ 'image/bmp', 'image/gif', 'image/jpeg' หรือ 'image/png' ได้เช่นกัน

รีเทิร์น

Blob — ข้อมูลในรูปแบบ BLOB


getBlob()

แสดงผลข้อมูลภายในออบเจ็กต์นี้เป็น Blob

รีเทิร์น

Blob — ข้อมูลในรูปแบบ BLOB


getContent()

รับเนื้อหาของ HtmlOutput นี้

// Log "<b>Hello, world!</b>"
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
Logger.log(output.getContent());

รีเทิร์น

String — เนื้อหาที่มีการแสดง


getFaviconUrl()

รับ URL สำหรับแท็กลิงก์ไอคอน Fav ที่เพิ่มไว้ในหน้าเว็บโดยเรียกใช้ setFaviconUrl(iconUrl) ระบบจะไม่สนใจแท็กลิงก์ไอคอน Fav ในไฟล์ HTML ของ Apps Script โดยตรง

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setFaviconUrl('http://www.example.com/image.png');
Logger.log(output.getFaviconUrl());

รีเทิร์น

String — URL ของรูปไอคอน Fav


getHeight()

รับความสูงเบื้องต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม หากเผยแพร่ HtmlOutput เป็นเว็บแอปแทน วิธีนี้จะแสดงผล null หากต้องการปรับขนาดกล่องโต้ตอบที่เปิดอยู่ ให้เรียกใช้ google.script.host.setHeight(height) ในโค้ดฝั่งไคลเอ็นต์

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setHeight(200);
Logger.log(output.getHeight());

รีเทิร์น

Integer — ความสูงเป็นพิกเซล


getMetaTags()

รับอาร์เรย์ของออบเจ็กต์ที่แสดงถึงเมตาแท็กที่เพิ่มลงในหน้าเว็บโดยการเรียกใช้ addMetaTag(name, content) ระบบจะไม่สนใจเมตาแท็กที่รวมอยู่ในไฟล์ HTML ของ Apps Script

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

var tags = output.getMetaTags();
Logger.log('<meta name="%s" content="%s"/>', tags[0].getName(), tags[0].getContent());

รีเทิร์น

HtmlOutputMetaTag[] — อาร์เรย์ของออบเจ็กต์ที่แสดงถึงเมตาแท็กที่เพิ่มลงในหน้าเว็บโดยการเรียกใช้ addMetaTag(name, content)


getTitle()

รับชื่อของหน้าเอาต์พุต โปรดทราบว่าระบบจะไม่สนใจองค์ประกอบ HTML ของ <title>

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
Logger.log(output.getTitle());

รีเทิร์น

String — ชื่อของหน้าเว็บ


getWidth()

รับความกว้างเบื้องต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม หากเผยแพร่ HtmlOutput เป็นเว็บแอปแทน วิธีนี้จะแสดงผล null หากต้องการปรับขนาดกล่องโต้ตอบที่เปิดอยู่ ให้เรียกใช้ google.script.host.setWidth(width) ในโค้ดฝั่งไคลเอ็นต์

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setWidth(200);
Logger.log(output.getWidth());

รีเทิร์น

Integer — ความกว้างเป็นพิกเซล


setContent(content)

ตั้งค่าเนื้อหาของ HtmlOutput นี้

var output = HtmlService.createHtmlOutput();
output.setContent('<b>Hello, world!</b>');

พารามิเตอร์

ชื่อTypeคำอธิบาย
contentStringเนื้อหาที่จะแสดง

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน

การขว้าง

Error — หาก HTML มีรูปแบบไม่ถูกต้อง


setFaviconUrl(iconUrl)

เพิ่มแท็กลิงก์สำหรับไอคอน Fav ในหน้าเว็บ ระบบจะไม่สนใจแท็กลิงก์ไอคอน Fav ที่รวมอยู่ในไฟล์ HTML ของ Apps Script

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setFaviconUrl('http://www.example.com/image.png');

พารามิเตอร์

ชื่อTypeคำอธิบาย
iconUrlStringURL ของรูปภาพไอคอน Fav ที่ส่วนขยายรูปภาพระบุประเภทรูปภาพ

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


setHeight(height)

ตั้งค่าความสูงเริ่มต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม หากเผยแพร่ HtmlOutput เป็นเว็บแอปแทน วิธีนี้จะไม่มีผล หากต้องการปรับขนาดกล่องโต้ตอบที่เปิดอยู่ ให้เรียกใช้ google.script.host.setHeight(height) ในโค้ดฝั่งไคลเอ็นต์

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setHeight(200);

พารามิเตอร์

ชื่อTypeคำอธิบาย
heightIntegerความสูงใหม่เป็นพิกเซล null จะให้ผลลัพธ์เป็นค่าเริ่มต้น

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


setSandboxMode(mode)

วิธีนี้จึงไม่ส่งผลใดๆ โดยก่อนหน้านี้ได้กำหนด sandbox mode ที่ใช้สำหรับสคริปต์ฝั่งไคลเอ็นต์ เพื่อปกป้องผู้ใช้จากการถูกแสดง HTML หรือ JavaScript ที่เป็นอันตราย โค้ดฝั่งไคลเอ็นต์ที่เรียกใช้จากบริการ HTML จะทำงานในแซนด์บ็อกซ์ความปลอดภัยซึ่งส่งผลให้มีการจำกัดโค้ด เดิมทีวิธีนี้ช่วยให้ผู้เขียนสคริปต์เลือกระหว่างเวอร์ชันต่างๆ ของแซนด์บ็อกซ์ได้ แต่ตอนนี้สคริปต์ทั้งหมดใช้โหมด IFRAME แล้ว ไม่ว่าจะตั้งค่าโหมดแซนด์บ็อกซ์ไว้อย่างไร ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำเกี่ยวกับข้อจำกัดของบริการ HTML

โหมด IFRAME กำหนดข้อจำกัดน้อยกว่าโหมดแซนด์บ็อกซ์อื่นๆ มากและทำงานได้เร็วที่สุด แต่จะไม่ทำงานเลยในเบราว์เซอร์รุ่นเก่าบางเบราว์เซอร์รวมถึง Internet Explorer 9 อ่านโหมดแซนด์บ็อกซ์ในสคริปต์ฝั่งไคลเอ็นต์ได้โดยตรวจสอบ google.script.sandbox.mode โปรดทราบว่าพร็อพเพอร์ตี้นี้จะแสดงผลโหมดจริงในไคลเอ็นต์ ซึ่งอาจต่างจากโหมดที่ขอบนเซิร์ฟเวอร์หากเบราว์เซอร์ของผู้ใช้ไม่รองรับโหมดที่ขอ

<!-- Read the sandbox mode (in a client-side script). -->
<script>
  alert(google.script.sandbox.mode);
</script>

พารามิเตอร์

ชื่อTypeคำอธิบาย
modeSandboxModeโหมดแซนด์บ็อกซ์ที่จะใช้

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


setTitle(title)

ตั้งชื่อหน้าเอาต์พุต สำหรับเว็บแอป นี่คือชื่อของทั้งหน้า และสำหรับ HtmlOutput ที่แสดงใน Google ชีตจะเป็นชื่อกล่องโต้ตอบ

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setTitle('My First Page');

พารามิเตอร์

ชื่อTypeคำอธิบาย
titleStringชื่อใหม่

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


setWidth(width)

ตั้งค่าความกว้างเริ่มต้นของกล่องโต้ตอบที่กำหนดเองใน Google เอกสาร ชีต หรือฟอร์ม หากเผยแพร่ HtmlOutput เป็นเว็บแอปแทน วิธีนี้จะไม่มีผล หากต้องการปรับขนาดกล่องโต้ตอบที่เปิดอยู่ ให้เรียกใช้ google.script.host.setWidth(width) ในโค้ดฝั่งไคลเอ็นต์

var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setWidth(200);

พารามิเตอร์

ชื่อTypeคำอธิบาย
widthIntegerความกว้างใหม่เป็นพิกเซล null จะแสดงค่าเริ่มต้น

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน


setXFrameOptionsMode(mode)

ตั้งค่าสถานะส่วนหัว X-Frame-Options ของหน้า ซึ่งควบคุมการป้องกันการแย่งชิงการคลิก

การตั้งค่า XFrameOptionsMode.ALLOWALL จะทำให้เว็บไซต์ใดก็ตามมี iframe ของหน้าเว็บได้ นักพัฒนาซอฟต์แวร์จึงควรใช้การป้องกันของตนเองเพื่อป้องกันการหลอกให้คลิก

หากสคริปต์ไม่ได้ตั้งค่าโหมด X-Frame-Options สคริปต์ Apps จะใช้โหมด XFrameOptionsMode.DEFAULT เป็นค่าเริ่มต้น

// Serve HTML with no X-Frame-Options header (in Apps Script server-side code).
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

พารามิเตอร์

ชื่อTypeคำอธิบาย
modeXFrameOptionsModeโหมดตัวเลือก XFrame ที่จะตั้งค่า

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สำหรับการทำเชน