Class HtmlOutput

HtmlOutput

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

function doGet() {
  return HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/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" cont>e<nt="..."/
meta name="google-site-ver>i<fication" content="..."/
meta name>=<"mobile-web-app-capable" >content="..."/
meta name="viewport" content="..."/
 
const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

พารามิเตอร์

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

รีเทิร์น

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

append(addedContent)

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

// Log &<q>uot;bHello, w<or><l>d!/bpHello again, w<or>ld./p"
const output = HtmlService.createHt<m>lOutput('<bH>ello, world!/b'<)>;
output.append(<9;>pHello again, world./p');
Logger.log(output.getContent());

พารามิเตอร์

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

รีเทิร์น

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

ส่ง

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

ดูเพิ่มเติม

appendUntrusted(addedContent)

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

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

// Log &<q>uot;bHello, w<or>&ld!/&blt;pgt;Hello again, w&orld.&lt;/pgt;"
const output = HtmlService.createHt<m>lOutput('<bH>ello, world!/b');
output<.>appendUntrusted(<9;>pHello again, world./p');
Logger.log(output.getContent());

พารามิเตอร์

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

รีเทิร์น

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

ส่ง

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

ดูเพิ่มเติม

asTemplate()

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
const template = output.asTemplate();

รีเทิร์น

HtmlTemplate — HtmlTemplate ใหม่

clear()

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/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' ได้ด้วย เช่นกัน สำหรับเอกสาร Google เอกสาร 'text/markdown' ก็ใช้ได้เช่นกัน

รีเทิร์น

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

getBlob()

ส่งคืนข้อมูลภายในออบเจ็กต์นี้เป็น Blob

รีเทิร์น

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

getContent()

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

// Log &<q>uot;bHello, w<or>ld!/b"
const output = HtmlService.createHt<m>lOutput('<bH>ello, world!/b');
Logger.log(output.getContent());

รีเทิร์น

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

getFaviconUrl()

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/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(&<#>39;bHello, wo<rl>d!/b');
output.setHeight(200);
Logger.log(output.getHeight());

รีเทิร์น

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

getMetaTags()

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

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

รีเทิร์น

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

getTitle()

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
Logger.log(output.getTitle());

รีเทิร์น

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

getWidth()

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.setWidth(200);
Logger.log(output.getWidth());

รีเทิร์น

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

setContent(content)

กำหนดเนื้อหาของ HtmlOutput นี้ 

const output = HtmlService.createHtmlOutput();
output.setContent(&<#>39;bHello, wo<rl>d!/b');

พารามิเตอร์

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

รีเทิร์น

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

ส่ง

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

setFaviconUrl(iconUrl)

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.setFaviconUrl('http://www.example.com/image.png');

พารามิเตอร์

ชื่อประเภทคำอธิบาย
iconUrlStringURL ของรูปภาพ Favicon โดยมีส่วนขยายรูปภาพที่ระบุประเภทรูปภาพ

รีเทิร์น

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

setHeight(height)

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.setHeight(200);

พารามิเตอร์

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

พารามิเตอร์

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

รีเทิร์น

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

setTitle(title)

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.setTitle('My First Page');

พารามิเตอร์

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

รีเทิร์น

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

setWidth(width)

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

const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.setWidth(200);

พารามิเตอร์

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

รีเทิร์น

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

setXFrameOptionsMode(mode)

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

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

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

// Serve HTML with no X-Frame-Options header (in Apps Script server-side code).
const output = HtmlService.createHtmlOutput(&<#>39;bHello, wo<rl>d!/b');
output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

พารามิเตอร์

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

รีเทิร์น

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