คู่มือสําหรับนักพัฒนาซอฟต์แวร์

Embedded Viewer API ช่วยให้คุณฝังเนื้อหาหนังสือจาก Google Books ลงในหน้าเว็บได้โดยตรงด้วย JavaScript นอกจากนี้ API ยังมียูทิลิตีจำนวนหนึ่งสำหรับจัดการตัวอย่างหนังสือ และมักใช้ร่วมกับ API อื่นๆ ที่อธิบายไว้ในเว็บไซต์นี้

วิซาร์ดการแสดงตัวอย่างเป็นเครื่องมือที่สร้างขึ้นบน Embedded Viewer API ซึ่งช่วยให้คุณเพิ่มความสามารถในการแสดงตัวอย่างในเว็บไซต์ได้ง่ายขึ้นเพียงคัดลอกโค้ด 2-3 บรรทัด เอกสารนี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ขั้นสูงที่ต้องการปรับแต่งลักษณะการแสดงผู้ชมบนเว็บไซต์

ผู้ชม

เอกสารประกอบนี้ออกแบบมาสำหรับผู้ที่คุ้นเคยกับแนวคิดการเขียนโปรแกรมและการเขียนโปรแกรมเชิงวัตถุของ JavaScript นอกจากนี้ คุณควรทำความคุ้นเคยกับ Google Books จากมุมมองของผู้ใช้ด้วย มีบทแนะนำ JavaScript มากมายบนเว็บ

เอกสารประกอบแนวคิดนี้ไม่สมบูรณ์และครอบคลุมทุกแง่มุม แต่ออกแบบมาเพื่อช่วยให้คุณเริ่มต้นสำรวจและพัฒนาแอปพลิเคชันเจ๋งๆ ด้วย Embedded Viewer API ได้อย่างรวดเร็ว ผู้ใช้ขั้นสูงอาจสนใจดูเอกสารอ้างอิง API ผู้มีสิทธิ์อ่านแบบฝัง ซึ่งให้รายละเอียดทั้งหมดเกี่ยวกับเมธอดและคำตอบที่รองรับ

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

"Hello, World" ของ Embedded Viewer API

วิธีที่ง่ายที่สุดในการเริ่มเรียนรู้เกี่ยวกับ Embedded Viewer API คือดูตัวอย่างง่ายๆ หน้าเว็บต่อไปนี้แสดงตัวอย่างขนาด 600x500 ของ Mountain View โดย Nicholas Perry, ISBN 0738531367 (เป็นส่วนหนึ่งของชุด "Images of America" ของ Arcadia Publishing)

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Books Embedded Viewer API Example</title>
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
    <script type="text/javascript">
      google.books.load();

      function initialize() {
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
        viewer.load('ISBN:0738531367');
      }

      google.books.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="viewerCanvas" style="width: 600px; height: 500px"></div>
  </body>
</html>

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

  1. เรารวม API Loader โดยใช้แท็ก script
  2. เราสร้างเอลิเมนต์ div ชื่อ "viewerCanvas" เพื่อเก็บผู้ชม
  3. เราเขียนฟังก์ชัน JavaScript เพื่อสร้างออบเจ็กต์ "viewer"
  4. เราจะโหลดหนังสือโดยใช้ตัวระบุที่ไม่ซ้ำกัน (ในกรณีนี้คือ ISBN:0738531367)
  5. เราใช้ google.books.setOnLoadCallback เพื่อเรียก initialize เมื่อ API โหลดเสร็จแล้ว

โดยจะอธิบายขั้นตอนเหล่านี้ด้านล่าง

การโหลด Embedded Viewer API

การใช้เฟรมเวิร์ก API Loader เพื่อโหลด Embedded Viewer API นั้นค่อนข้างง่าย ซึ่งประกอบด้วย 2 ขั้นตอนต่อไปนี้

  1. รวมไลบรารี API Loader ไว้ด้วย 
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
  2. เรียกใช้เมธอด google.books.load google.books.load เมธอดใช้พารามิเตอร์ลิสต์ที่ไม่บังคับซึ่งระบุฟังก์ชัน Callback หรือภาษาตามที่อธิบายไว้ด้านล่าง 
    <script type="text/javascript">
  google.books.load();
</script>

การโหลด Embedded Viewer API เวอร์ชันแปล

Embedded Viewer API ใช้ภาษาอังกฤษโดยค่าเริ่มต้นเมื่อแสดงข้อมูลแบบข้อความ เช่น เคล็ดลับเครื่องมือ ชื่อตัวควบคุม และข้อความลิงก์ หากต้องการเปลี่ยน Embedded Viewer API ให้แสดงข้อมูลในภาษาใดภาษาหนึ่งอย่างถูกต้อง คุณสามารถเพิ่มพารามิเตอร์ language (ไม่บังคับ) ลงในการเรียก google.books.load

ตัวอย่างเช่น หากต้องการแสดงข้อบังคับของตัวอย่างหนังสือที่มีภาษาอินเทอร์เฟซเป็นโปรตุเกสแบบบราซิล ให้ทำดังนี้

<script type="text/javascript">
  google.books.load({"language": "pt-BR"});
</script>

ดูตัวอย่าง (book-language.html)

เมื่อใช้ API โปรแกรมดูแบบฝังในภาษาอื่นที่ไม่ใช่ภาษาอังกฤษ เราขอแนะนำอย่างยิ่งให้แสดงหน้าเว็บด้วยการตั้งค่าส่วนหัว content-type เป็น utf-8 หรือใส่แท็ก <meta> ที่เทียบเท่าในหน้าเว็บของคุณ การดำเนินการนี้ช่วยให้มั่นใจได้ว่าอักขระจะแสดงผลอย่างถูกต้องในทุกเบราว์เซอร์ ดูข้อมูลเพิ่มเติมได้ที่หน้าของ W3C เกี่ยวกับการตั้งค่าพารามิเตอร์ชุดอักขระ HTTP

องค์ประกอบ DOM ของผู้ชม

<div id="viewerCanvas" style="width: 600px; height: 500px"></div>

หนังสือจะแสดงบนหน้าเว็บต้องจองที่ โดยทั่วไปมักจะทำได้โดยการสร้างองค์ประกอบ div ที่มีชื่อและรับการอ้างอิงไปยังองค์ประกอบนี้ใน Document Object Model (DOM) ของเบราว์เซอร์

ตัวอย่างด้านบนกำหนด div ที่มีชื่อว่า "viewerCanvas" และกำหนดขนาดโดยใช้แอตทริบิวต์สไตล์ โปรแกรมดูจะใช้ขนาดของคอนเทนเนอร์โดยปริยายเพื่อปรับขนาดตัวเอง

ออบเจ็กต์ DefaultViewer

var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));

คลาส JavaScript ที่สร้างและควบคุมผู้ดู 1 คนในหน้าเว็บคือคลาส DefaultViewer (คุณสร้างอินสแตนซ์ของคลาสนี้ได้มากกว่า 1 อินสแตนซ์ โดยแต่ละออบเจ็กต์จะกำหนดโปรแกรมดูแยกต่างหากในหน้าเว็บ) ระบบจะสร้างอินสแตนซ์ใหม่ของคลาสนี้โดยใช้โอเปอเรเตอร์ new ของ JavaScript

เมื่อสร้างอินสแตนซ์โปรแกรมดูภาพใหม่ คุณต้องระบุโหนด DOM ในหน้าเว็บ (โดยปกติจะเป็นองค์ประกอบ div) เป็นคอนเทนเนอร์สําหรับโปรแกรมดูภาพ โหนด HTML เป็นองค์ประกอบย่อยของออบเจ็กต์ document ของ JavaScript และเราได้รับข้อมูลอ้างอิงถึงองค์ประกอบนี้ผ่านเมธอด document.getElementById()

โค้ดนี้จะกําหนดตัวแปร (ชื่อ viewer) และกำหนดตัวแปรนั้นให้กับออบเจ็กต์ DefaultViewer ใหม่ ฟังก์ชัน DefaultViewer() เรียกว่าconstructor และคำจำกัดความ (ย่อมาจาก ข้อมูลอ้างอิงเกี่ยวกับ Embedded Viewer API เพื่อความชัดเจน) แสดงอยู่ด้านล่าง

ผู้ผลิต คำอธิบาย
DefaultViewer(container, opts?) สร้างโปรแกรมดูใหม่ภายใน container HTML ที่ระบุ ซึ่งควรเป็นองค์ประกอบระดับบล็อกในหน้าเว็บ (โดยทั่วไปคือ DIV) ระบบจะส่งตัวเลือกขั้นสูงโดยใช้พารามิเตอร์ opts (ไม่บังคับ)

โปรดทราบว่าพารามิเตอร์ที่ 2 ในคอนสตรคเตอร์นั้นไม่บังคับ มีไว้สําหรับการใช้งานขั้นสูงที่อยู่นอกเหนือขอบเขตของเอกสารนี้ และไม่ได้รวมอยู่ในตัวอย่าง "Hello, World"

การเริ่มต้นโปรแกรมดูหนังสือด้วยหนังสือที่เฉพาะเจาะจง

  viewer.load('ISBN:0738531367');

เมื่อสร้างโปรแกรมดูผ่านตัวสร้าง DefaultViewer แล้ว โปรแกรมดูจะต้องได้รับการเริ่มต้นด้วยหนังสือที่เฉพาะเจาะจง การดำเนินการเริ่มต้นนี้เกิดขึ้นโดยใช้เมธอด load() ของผู้ดู เมธอด load() ต้องใช้ค่า identifier ซึ่งจะบอก API ว่าให้แสดงหนังสือเล่มใด ต้องส่งเมธอดนี้ก่อนดำเนินการอื่นๆ กับออบเจ็กต์ Viewer

หากรู้จักตัวระบุหลายตัวของหนังสือ เช่น ISBN สำหรับฉบับปกอ่อนหรือหมายเลข OCLC ทางเลือก คุณสามารถส่งอาร์เรย์ของสตริงตัวระบุที่เป็นพารามิเตอร์แรกไปยังฟังก์ชัน load() มุมมองจะแสดงหนังสือหากมีการแสดงตัวอย่างแบบฝังได้ซึ่งเชื่อมโยงกับตัวระบุใดก็ได้ในอาร์เรย์

ตัวระบุหนังสือที่รองรับ

เช่นเดียวกับฟีเจอร์ Dynamic Links ในตัวที่ดูได้ API รองรับค่าหลายค่าเพื่อระบุหนังสือที่เฉพาะเจาะจง ซึ่งได้แก่

ISBN
เลขมาตรฐานสากลประจำหนังสือเชิงพาณิชย์ 10 หรือ 13 หลักที่ไม่ซ้ำกัน
ตัวอย่างเช่น ISBN:0738531367
หมายเลข OCLC
หมายเลขเฉพาะที่ OCLC กำหนดให้กับหนังสือเมื่อเพิ่มระเบียนของหนังสือลงในระบบแคตตาล็อกของ WorldCat
ตัวอย่างเช่น OCLC:70850767
LCCN
หมายเลขมาตรฐานสำหรับหนังสือของหอสมุดรัฐสภาอเมริกันที่หอสมุดรัฐสภาอเมริกันกำหนดให้กับระเบียน
ตัวอย่าง: LCCN:2006921508
รหัสระดับเสียงของ Google หนังสือ
สตริงที่ไม่ซ้ำซึ่ง Google Books กำหนดให้กับเล่มหนังสือ ซึ่งจะปรากฏใน URL ของหนังสือใน Google Books
ตัวอย่างเช่น Py8u3Obs4f4C
URL การแสดงตัวอย่างของ Google Books
URL ที่เปิดหน้าตัวอย่างหนังสือใน Google Books
ตัวอย่างเช่น https://books.google.com/books?id=Py8u3Obs4f4C&printsec=frontcover

โดยตัวระบุเหล่านี้มักใช้ร่วมกับ API อื่นๆ ในตระกูล Google Books API เช่น คุณสามารถใช้ลิงก์แบบไดนามิกเพื่อแสดงผลปุ่มแสดงตัวอย่างได้เฉพาะในกรณีที่ฝังหนังสือได้ และเมื่อผู้ใช้คลิกปุ่มดังกล่าว ให้สร้างอินสแตนซ์ของโปรแกรมดูโดยใช้ URL ของตัวอย่างที่การเรียกลิงก์แบบไดนามิกแสดงผล ในทำนองเดียวกัน คุณสามารถสร้างแอปพลิเคชันการเรียกดูและแสดงตัวอย่างที่สมบูรณ์ด้วย Books API ซึ่งจะแสดงตัวระบุอุตสาหกรรมที่เหมาะสมหลายรายการในฟีดเล่ม ไปที่หน้าตัวอย่างเพื่อดูการใช้งานขั้นสูง

การจัดการการเริ่มต้นที่ไม่สําเร็จ

ในบางกรณี การเรียกใช้ load อาจไม่สำเร็จ โดยทั่วไปแล้วกรณีนี้จะเกิดขึ้นเมื่อ API ไม่พบหนังสือที่เชื่อมโยงกับตัวระบุที่ให้มา เมื่อไม่มีการแสดงตัวอย่างหนังสือ เมื่อฝังตัวอย่างหนังสือไม่ได้ หรือเมื่อข้อจำกัดด้านเขตแดนทำให้ผู้ใช้ไม่เห็นหนังสือเล่มนี้ คุณอาจต้องการได้รับการแจ้งเตือนเกี่ยวกับความล้มเหลวดังกล่าวเพื่อให้โค้ดจัดการกับเงื่อนไขนี้ได้อย่างราบรื่น ด้วยเหตุนี้ ฟังก์ชัน load จึงให้คุณส่งพารามิเตอร์ที่ 2 ที่ไม่บังคับ ซึ่งก็คือ notFoundCallback ซึ่งจะระบุฟังก์ชันที่ควรเรียกใช้หากโหลดหนังสือไม่ได้ ตัวอย่างเช่น โค้ดต่อไปนี้จะสร้างกล่อง "ข้อความแจ้ง" ของ JavaScript หากฝังหนังสือได้

function alertNotFound() {
  alert("could not embed the book!");
}

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:1234', alertNotFound);
}

ดูตัวอย่าง (book-notfound.html)

เมื่อใช้การเรียกกลับนี้ คุณอาจเลือกแสดงข้อผิดพลาดที่คล้ายกัน หรือเลือกซ่อนองค์ประกอบ viewerCanvas โดยสิ้นเชิงก็ได้ พารามิเตอร์ Callback ที่ล้มเหลวเป็นตัวเลือกที่ไม่บังคับ และไม่รวมอยู่ในตัวอย่าง " Hello World"

หมายเหตุ: เนื่องจากตัวอย่างเพลงอาจไม่พร้อมใช้งานสำหรับหนังสือบางเล่มและผู้ใช้บางราย คุณจึงควรตรวจสอบว่าตัวอย่างเพลงพร้อมใช้งานหรือไม่ก่อนที่จะพยายามโหลดโปรแกรมดูตัวอย่างเพลง เช่น คุณอาจต้องการแสดงปุ่ม หน้าเว็บ หรือส่วน "แสดงตัวอย่างของ Google" ใน UI เฉพาะเมื่อผู้ใช้จะเห็นตัวอย่างเท่านั้น ซึ่งทำได้โดยใช้ Books API หรือ Dynamic Links ซึ่งทั้ง 2 รายการจะรายงานว่าหนังสือจะพร้อมให้ฝังโดยใช้โปรแกรมดูหรือไม่

การจัดการการเริ่มต้นที่สำเร็จ

นอกจากนี้ คุณยังอาจต้องการทราบด้วยว่าโหลดหนังสือเรียบร้อยแล้วหรือไม่และเมื่อใด ด้วยเหตุนี้ ฟังก์ชัน load จึงรองรับพารามิเตอร์ที่สามซึ่งไม่บังคับอย่าง successCallback ซึ่งจะทำงานเมื่อโหลดหนังสือเสร็จแล้ว

function alertInitialized() {
  alert("book successfully loaded and initialized!");
}

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0738531367', null, alertInitialized);
}

ดูตัวอย่าง (book-success.html)

ตัวอย่างเช่น แบ็กคอลนี้อาจมีประโยชน์ในกรณีที่คุณต้องการแสดงองค์ประกอบบางอย่างในหน้าเว็บเฉพาะในกรณีที่โปรแกรมเล่นแสดงผลอย่างสมบูรณ์

การแสดงโปรแกรมดูเอกสารเมื่อโหลด

  google.books.setOnLoadCallback(initialize);

ขณะที่หน้า HTML แสดงผล จะมีการสร้าง Document Object Model (DOM) รวมทั้งได้รับรูปภาพและสคริปต์ภายนอกทั้งหมดและรวมไว้ในออบเจ็กต์ document ระบบใช้ฟังก์ชัน google.books.setOnLoadCallback เพื่อเลื่อนการเรียกใช้ฟังก์ชันที่สร้างออบเจ็กต์ DefaultViewer ออกไปจนกว่าหน้าเว็บจะโหลดเสร็จสมบูรณ์ เพื่อให้แน่ใจว่าโปรแกรมดูของเราจะแสดงในหน้าเว็บหลังจากที่หน้าเว็บโหลดเสร็จสมบูรณ์แล้วเท่านั้น เนื่องจาก setOnLoadCallback จะเรียกใช้ initialize เฉพาะเมื่อ API โปรแกรมดูแบบฝังและพร้อมใช้งานเท่านั้น ซึ่งจะช่วยหลีกเลี่ยงลักษณะการทำงานที่คาดเดาไม่ได้และช่วยให้ควบคุมวิธีการและเวลาในการวาดผู้ชมได้

หมายเหตุ: เพื่อเพิ่มความสามารถในการใช้งานร่วมกันข้ามเบราว์เซอร์ให้ได้มากที่สุด เราขอแนะนำอย่างยิ่งให้คุณกำหนดเวลาโหลดของผู้ดูโดยใช้ฟังก์ชัน google.books.setOnLoadCallback แทนการใช้เหตุการณ์ onLoad ในแท็ก <body>

การโต้ตอบของผู้ชม

เมื่อสร้างออบเจ็กต์ DefaultViewer แล้ว คุณจะโต้ตอบกับออบเจ็กต์นั้นได้ ออบเจ็กต์โปรแกรมดูพื้นฐานมีลักษณะและทํางานคล้ายกับโปรแกรมดูที่คุณโต้ตอบด้วยในเว็บไซต์ Google Books และมีการทำงานในตัวมากมาย

แต่คุณยังโต้ตอบกับผู้ชมโดยใช้โปรแกรมได้อีกด้วย ออบเจ็กต์ DefaultViewer รองรับเมธอดจำนวนหนึ่งที่เปลี่ยนสถานะการแสดงตัวอย่างโดยตรง เช่น เมธอด zoomIn(), nextPage() และ highlight() จะทำงานกับโปรแกรมเล่นแบบเป็นโปรแกรม ไม่ใช่ผ่านการโต้ตอบของผู้ใช้

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

function nextStep(viewer) {
  window.setTimeout(function() {
    viewer.nextPage();
    nextStep(viewer);
  }, 3000);
}

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0738531367');
  nextStep(viewer);
}

google.books.setOnLoadCallback(initialize);

ดูตัวอย่าง (book-animate.html)

โปรดทราบว่าการเรียกไปยังผู้ดูด้วยโปรแกรมจะล้มเหลวหรือไม่ส่งผลใดๆ จนกว่าผู้ดูจะสามารถเริ่มต้นกับหนังสือเล่มใดเล่มหนึ่งอย่างสมบูรณ์ โปรดใช้พารามิเตอร์ successCallback กับ viewer.load ตามที่อธิบายไว้ด้านบนเพื่อให้แน่ใจว่าคุณจะเรียกใช้ฟังก์ชันดังกล่าวเมื่อผู้ชมพร้อมเท่านั้น

สำหรับข้อมูลเกี่ยวกับฟังก์ชันทั้งหมดที่ออบเจ็กต์ DefaultViewer รองรับ โปรดดูคู่มือข้อมูลอ้างอิง

โน้ตการเขียนโปรแกรม

ก่อนเริ่มเจาะลึก Embedded Viewer API คุณควรคำนึงถึงข้อกังวลต่อไปนี้เพื่อให้แอปพลิเคชันทำงานได้อย่างราบรื่นในแพลตฟอร์มที่ต้องการ

ความเข้ากันได้กับเบราว์เซอร์

Embedded Viewer API รองรับ Internet Explorer, Firefox และ Safari เวอร์ชันล่าสุด และมักจะรองรับเบราว์เซอร์อื่นๆ ที่ใช้ Gecko และ WebKit ด้วย เช่น Camino และ Google Chrome

บางครั้งแอปพลิเคชันต่างๆ ต้องใช้ลักษณะการทํางานที่แตกต่างกันสําหรับผู้ใช้ที่มีเบราว์เซอร์ที่เข้ากันไม่ได้ Embedded Viewer API ไม่มีลักษณะการทำงานอัตโนมัติเมื่อตรวจพบเบราว์เซอร์ที่เข้ากันไม่ได้ ตัวอย่างส่วนใหญ่ในเอกสารนี้ไม่ได้ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ และไม่ได้แสดงข้อความแสดงข้อผิดพลาดสำหรับเบราว์เซอร์รุ่นเก่า แอปพลิเคชันจริงอาจทําบางอย่างที่เหมาะกับเบราว์เซอร์รุ่นเก่าหรือไม่เข้ากันได้มากกว่า แต่เราไม่ได้ใส่การตรวจสอบดังกล่าวเพื่อให้ตัวอย่างอ่านง่ายขึ้น

แอปพลิเคชันที่ไม่สำคัญจะต้องพบความไม่สอดคล้องกันระหว่างเบราว์เซอร์กับแพลตฟอร์มต่างๆ อย่างหลีกเลี่ยงไม่ได้ นอกจากนี้ เว็บไซต์อย่าง quirksmode.org ก็เป็นแหล่งข้อมูลที่ยอดเยี่ยมในการค้นหาวิธีแก้ปัญหาชั่วคราว

XHTML และโหมดที่ไม่มาตรฐาน

เราขอแนะนำให้คุณใช้ XHTML ที่สอดคล้องกับมาตรฐานในหน้าเว็บที่มีเครื่องมือดู เมื่อเบราว์เซอร์เห็น XHTML DOCTYPE ที่ด้านบนของหน้า เบราว์เซอร์จะแสดงผลหน้าเว็บใน "โหมดการปฏิบัติตามมาตรฐาน" ซึ่งทำให้คาดการณ์เลย์เอาต์และลักษณะการทำงานในเบราว์เซอร์ต่างๆ ได้มากขึ้น หน้าเว็บที่ไม่มีคําจํากัดความดังกล่าวอาจแสดงผลใน "โหมดข้อบกพร่อง" ซึ่งอาจทําให้เลย์เอาต์ไม่สอดคล้องกัน

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

หมายเหตุเกี่ยวกับตัวอย่าง Embedded Viewer API

โปรดทราบว่าตัวอย่างส่วนใหญ่ในเอกสารประกอบนี้แสดงเฉพาะโค้ด JavaScript ที่เกี่ยวข้อง ไม่ใช่ไฟล์ HTML ทั้งหมด คุณสามารถเสียบโค้ด JavaScript ลงในไฟล์ HTML โครงร่างของคุณเอง หรือจะดาวน์โหลดไฟล์ HTML แบบเต็มของตัวอย่างแต่ละรายการโดยคลิกลิงก์ที่อยู่หลังตัวอย่างก็ได้

การแก้ปัญหา

หากรหัสใช้งานไม่ได้ โปรดลองทำตามแนวทางต่อไปนี้ซึ่งอาจช่วยแก้ปัญหาได้