หน้านี้ได้รับการแปลโดย Cloud Translation API

Class 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`	เพิ่มแท็กลิงก์สำหรับ Favicon ลงในหน้า
`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="..."/>

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`name`	`String`	ค่าของแอตทริบิวต์ชื่อของเมตาแท็ก
`content`	`String`	ค่าแอตทริบิวต์เนื้อหาของเมตาแท็ก

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

`append(addedContent)`

ต่อเนื้อหาใหม่ต่อจากเนื้อหาของ HtmlOutput นี้ ใช้เฉพาะกับเนื้อหาจากแหล่งที่มาที่เชื่อถือได้ เนื่องจากไม่มีการหลีกค่าบ่าย

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`addedContent`	`String`	เนื้อหาที่จะเพิ่มต่อท้าย

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

โยน

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

ดูเพิ่มเติม

appendUntrusted(addedContent)

`appendUntrusted(addedContent)`

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

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

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`addedContent`	`String`	เนื้อหาที่จะเพิ่มต่อท้าย

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

โยน

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

ดูเพิ่มเติม

append(addedContent)

`asTemplate()`

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

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

รีเทิร์น

HtmlTemplate — HtmlTemplate เวอร์ชันใหม่

`clear()`

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

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

พารามิเตอร์

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

รีเทิร์น

Blob — ข้อมูลเป็น Blob

`getBlob()`

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

รีเทิร์น

Blob — ข้อมูลเป็น Blob

`getContent()`

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

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

รีเทิร์น

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

`getFaviconUrl()`

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

const 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) ในโค้ดฝั่งไคลเอ็นต์

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

รีเทิร์น

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

`getMetaTags()`

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

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

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

รีเทิร์น

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

`getTitle()`

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

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

รีเทิร์น

String — ชื่อหน้า

`getWidth()`

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

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

รีเทิร์น

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

`setContent(content)`

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

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

พารามิเตอร์

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

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

โยน

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

`setFaviconUrl(iconUrl)`

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

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`iconUrl`	`String`	URL ของรูปภาพ Favicon พร้อมส่วนขยายรูปภาพที่ระบุประเภทรูปภาพ

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

`setHeight(height)`

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

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`height`	`Integer`	ความสูงใหม่เป็นพิกเซล โดย `null` จะเป็นค่าเริ่มต้น

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

`setSandboxMode(mode)`

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

พารามิเตอร์

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

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

`setTitle(title)`

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

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

พารามิเตอร์

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

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

`setWidth(width)`

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

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

พารามิเตอร์

ชื่อ	ประเภท	คำอธิบาย
`width`	`Integer`	ความกว้างใหม่เป็นพิกเซล โดย `null` จะเป็นค่าเริ่มต้น

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม

`setXFrameOptionsMode(mode)`

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

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

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

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

พารามิเตอร์

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

รีเทิร์น

HtmlOutput — เอาต์พุตนี้สําหรับการต่อเชื่อม