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

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

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

ผู้ชม

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

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

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

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

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

การโหลด API โปรแกรมอ่านแบบฝัง

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

  1. รวมไลบรารีเครื่องมือโหลด API ดังนี้ 
    <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>

การโหลด API ผู้มีสิทธิ์อ่านแบบฝังเวอร์ชันที่แปลแล้ว

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

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

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

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

รหัสภาษา RFC 3066 ที่รองรับในปัจจุบัน ได้แก่ af, ar, hy, bg, ca, zh-CN, zh-TW, hr, cs, da, nl, en, fil, fi, fr, de, el, he, hu, is, id, it, ja, ko, lv, lt, ms,

เมื่อใช้ 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() เป็นที่รู้จักในนามเครื่องมือสร้าง และคำจำกัดความ (ย่อไว้เพื่อความชัดเจนจาก การอ้างอิง API ผู้ดูแบบฝัง) แสดงอยู่ด้านล่าง

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

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

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

  viewer.load('ISBN:0738531367');

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

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

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

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

ISBN
หมายเลขหนังสือมาตรฐานสากลแบบไม่ซ้ำกัน 10 หรือ 13 หลัก
ตัวอย่าง: ISBN:0738531367
หมายเลข OCLC
หมายเลขเฉพาะที่ OCLC กำหนดให้กับหนังสือเมื่อเพิ่มระเบียนของหนังสือลงในระบบแคตตาล็อกของ WorldCat
ตัวอย่างเช่น OCLC:70850767
LCCN
หมายเลขควบคุมของหอสมุดรัฐสภา (Library of Congress) ที่หอสมุดรัฐสภาอเมริกันกำหนดให้บันทึกนี้
ตัวอย่างเช่น 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 นี้ พารามิเตอร์ Callback ที่ล้มเหลวเป็นตัวเลือกที่ไม่บังคับ และไม่รวมอยู่ในตัวอย่าง " Hello World"

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

การจัดการการเริ่มต้นที่ประสบความสำเร็จ

นอกจากนี้ การรู้ว่าหนังสือโหลดสำเร็จหรือไม่และเมื่อใดก็อาจมีประโยชน์เช่นกัน ด้วยเหตุนี้ ฟังก์ชัน load จึงรองรับพารามิเตอร์เสริมที่ 3 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)

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

การแสดงผู้ชมขณะโหลด

  google.books.setOnLoadCallback(initialize);

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

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

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

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

แต่คุณก็โต้ตอบกับผู้ชมแบบเป็นโปรแกรมได้ด้วย ออบเจ็กต์ 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 รองรับ โปรดดูคู่มือข้อมูลอ้างอิง

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

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

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

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

บางครั้งแอปพลิเคชันที่แตกต่างกันอาจต้องใช้ลักษณะการทำงานที่แตกต่างกันสำหรับผู้ใช้ที่มีเบราว์เซอร์ที่ใช้ร่วมกันไม่ได้ 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">

หมายเหตุเกี่ยวกับตัวอย่าง API โปรแกรมอ่านแบบฝัง

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

การแก้ปัญหา

หากดูเหมือนว่าโค้ดของคุณจะไม่ทำงาน ต่อไปนี้เป็นวิธีการบางอย่าง ที่อาจช่วยคุณแก้ปัญหาได้