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 นี้โดยใช้การกำหนดบริบทเป็นอักขระหลีก
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');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
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());

พารามิเตอร์

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

รีเทิร์น

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

การขว้าง

Error — หาก HTML ผิดรูปแบบ

ดูเพิ่มเติม

appendUntrusted(addedContent)

เพิ่มเนื้อหาใหม่ลงในเนื้อหาของ HtmlOutput นี้โดยใช้การกำหนดบริบทเป็นอักขระหลีก

เมธอดนี้ออกจากเนื้อหาอย่างถูกต้องตามสถานะปัจจุบันของ HtmlOutput เพื่อให้ผลลัพธ์เป็นสตริงที่ปลอดภัยโดยไม่มีมาร์กอัปหรือการดำเนินการด้านข้าง ใช้รายการนี้แทน ต่อท้ายทุกครั้งที่คุณเพิ่มเนื้อหาจากแหล่งที่มาที่ไม่น่าเชื่อถือ เช่น จากผู้ใช้ เพื่อหลีกเลี่ยง การอนุญาตข้อบกพร่อง Cross-site Scripting (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());

พารามิเตอร์

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

รีเทิร์น

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

การขว้าง

Error — หาก HTML ผิดรูปแบบมาก

ดูเพิ่มเติม

asTemplate()

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

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

รีเทิร์น

HtmlTemplate — HtmlTemplate ใหม่

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 ที่สร้างใหม่อาจมีข้อกำหนดที่เข้มงวดขึ้นชั่วคราว โควต้า

พารามิเตอร์

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

รีเทิร์น

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

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

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>');

พารามิเตอร์

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

รีเทิร์น

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

การขว้าง

Error — หาก HTML ผิดรูปแบบ

setFaviconUrl(iconUrl)

เพิ่มแท็กลิงก์สําหรับไอคอน Fav ไปยังหน้า แท็กลิงก์ไอคอน Fav รวมอยู่ในแอปโดยตรง ระบบจะไม่พิจารณาไฟล์ HTML ของสคริปต์ 

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
iconUrlStringURL ของไอคอน Fav ซึ่งมีส่วนขยายรูปภาพแสดงถึงรูปภาพดังกล่าว ประเภท

รีเทิร์น

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

setHeight(height)

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

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

พารามิเตอร์

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

รีเทิร์น

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

setSandboxMode(mode)

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

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

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

พารามิเตอร์

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

รีเทิร์น

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

setTitle(title)

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

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
titleStringชื่อใหม่

รีเทิร์น

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

setWidth(width)

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

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

พารามิเตอร์

ชื่อประเภทคำอธิบาย
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);

พารามิเตอร์

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

รีเทิร์น

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