ใน Web API มีออบเจ็กต์ คุณสมบัติ และฟังก์ชันที่มีประโยชน์มากที่สามารถใช้เพื่อทำงานเล็กๆ เช่น การเข้าถึง DOM ไปจนถึงงานที่ซับซ้อน เช่น การประมวลผลเสียงและวิดีโอ API ทั่วไป ได้แก่ Canvas, Web Worker, History, Fetch ฯลฯ มาดู Web API ที่ไม่ธรรมดาแต่มีประโยชน์กันดีกว่า!
ภาพรวมข้อความแบบเต็ม:
Web Audio API
Fullscreen API
Web Speech API
เว็บ Bluetooth API
Vibration API
Broadcast Channel API
คลิปบอร์ด API
Web Share API
Audio API ช่วยให้เราสามารถดำเนินการสตรีมเสียงบนเว็บได้ และสามารถใช้เพื่อเพิ่มเสียงได้ แหล่งที่มาบนเอฟเฟกต์เว็บและตัวกรอง แหล่งที่มาของเสียงอาจมาจาก <audio> ไฟล์ต้นฉบับวิดีโอ/เสียง หรือสตรีมเครือข่ายเสียง
ลองดูตัวอย่าง:
<body>
<ส่วนหัว>
<h2>เว็บ API<h2>
</ส่วนหัว>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
การสาธิตเสียง
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<การควบคุมเสียง src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">เริ่มต้น</button>
<button onclick="audioFromAudioFile.play()">เล่น</button>
<button onclick="audioFromAudioFile.pause()">หยุดชั่วคราว</button>
<button onclick="audioFromAudioFile.stop()">หยุด</button>
</div>
<div>
<span>ฉบับที่: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></ ช่วง>
<span>แพน: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" />< /ช่วง>
</div>
</div>
</div>
</div>
</ร่างกาย>
<สคริปต์>
const l = console.log
ให้ audioFromAudioFile = (function() {
var audioContext
varvolNode
varpannerNode
var mediaSource
ฟังก์ชั่น init() {
ล.("เริ่มต้น")
พยายาม {
audioContext = AudioContext ใหม่ ()
mediaSource = audioContext.createMediaElementSource (เสียง)
volNode = audioContext.createGain()
volNode.gain.value = 1
pannerNode = StereoPannerNode ใหม่ (audioContext, { pan:0 })
mediaSource.connect (volNode) เชื่อมต่อ (pannerNode) เชื่อมต่อ (audioContext.destination)
-
จับ(จ) {
error.innerHTML = "อุปกรณ์นี้ไม่รองรับ Web Audio API"
error.classList.remove("ปิด")
-
-
ฟังก์ชั่นเล่น () {
เสียง.เล่น()
-
ฟังก์ชั่นหยุดชั่วคราว () {
เสียง.หยุดชั่วคราว()
-
ฟังก์ชั่นหยุด() {
เสียง.หยุด()
-
ฟังก์ชั่น changeVolume () {
volNode.gain.value = ค่านี้
l("ช่วงปริมาตร:",this.value)
-
ฟังก์ชั่น changePan() {
pannerNode.gain.value = ค่านี้
l("ช่วงการแพน:",this.value)
-
กลับ {
เริ่มต้น,
เล่น,
หยุดชั่วคราว,
หยุด,
เปลี่ยนแพน,
เปลี่ยนระดับเสียง
-
-
</script> ตัวอย่างนี้ถ่ายโอนเสียงจากองค์ประกอบ <audio> ไปยัง AudioContext เอฟเฟกต์เสียง (เช่น การแพน) จะถูกเพิ่มไปยังแหล่งกำเนิดเสียงก่อนที่จะส่งออกไปยังเอาต์พุตเสียง (ลำโพง)
ButtonInit เรียกใช้ฟังก์ชัน init เมื่อคลิก สิ่งนี้จะสร้าง AudioContext และตั้งเป็น audioContext ถัดไป สร้างแหล่งสื่อ createMediaElementSource(audio) โดยส่งองค์ประกอบเสียงเป็นแหล่งเสียง โหนดโวลุ่ม volNode ถูกสร้างขึ้นโดย createGain และสามารถใช้เพื่อปรับระดับเสียง ถัดไปใช้ StereoPannerNode เพื่อตั้งค่าเอฟเฟกต์การแพน และสุดท้ายเชื่อมต่อโหนดกับแหล่งสื่อ
คลิกปุ่ม (เล่น หยุดชั่วคราว หยุด) เพื่อเล่น หยุดชั่วคราว และหยุดเสียง หน้านี้มีแถบเลื่อนระดับเสียงและช่วงการเลื่อน และคุณสามารถปรับระดับเสียงและเอฟเฟกต์การเลื่อนได้โดยการเลื่อนแถบเลื่อน
ทรัพยากรที่เกี่ยวข้อง:
Fullscreen API ใช้เพื่อเปิดใช้งานโหมดเต็มหน้าจอในเว็บ แอปพลิเคชัน ซึ่งช่วยให้คุณสามารถดูเพจ/องค์ประกอบในโหมดเต็มหน้าจอได้ บนโทรศัพท์ Android ข้อมูลจะล้นหน้าต่างเบราว์เซอร์และแถบสถานะที่ด้านบนของ Android (ซึ่งแสดงสถานะเครือข่าย สถานะแบตเตอรี่ ฯลฯ)
วิธี API แบบเต็มหน้าจอ:
requestFullscreen : แสดงองค์ประกอบที่เลือกในโหมดเต็มหน้าจอบนระบบ ปิดแอปพลิเคชันอื่น ๆ เช่นเดียวกับเบราว์เซอร์และองค์ประกอบ UI ของระบบexitFullscreen : ออกจากโหมดเต็มหน้าจอและสลับไปยังโหมดปกติมาดูตัวอย่างทั่วไปของการใช้โหมดเต็มหน้าจอในการดูวิดีโอ:
<body>
<ส่วนหัว>
<h2>เว็บ API<h2>
</ส่วนหัว>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
การสาธิตแบบเต็มหน้าจอ
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
API นี้ทำให้หน้าเว็บของเราในโหมดเต็มหน้าจอเป็นไปได้ โดยให้คุณเลือกองค์ประกอบที่คุณต้องการดูในโหมดเต็มหน้าจอ จากนั้นจะปิดคุณลักษณะของหน้าต่างเบราว์เซอร์ เช่น แถบ URL บานหน้าต่าง และนำเสนอองค์ประกอบเพื่อใช้งานทั้งหมด ความกว้างและความสูงของระบบ
ในโทรศัพท์ Android ระบบจะลบหน้าต่างเบราว์เซอร์และ UI ของ Android ที่แสดงสถานะเครือข่าย สถานะแบตเตอรี่ และแสดงองค์ประกอบแบบเต็มความกว้างของระบบ Android
</div>
<div class="วิดีโอเวที">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle เต็มหน้าจอ</button>
</div>
<div>
API นี้ทำให้หน้าเว็บของเราในโหมดเต็มหน้าจอเป็นไปได้ โดยให้คุณเลือกองค์ประกอบที่คุณต้องการดูในโหมดเต็มหน้าจอ จากนั้นจะปิดคุณลักษณะของหน้าต่างเบราว์เซอร์ เช่น แถบ URL บานหน้าต่าง และนำเสนอองค์ประกอบเพื่อใช้งานทั้งหมด ความกว้างและความสูงของระบบ
ในโทรศัพท์ Android ระบบจะลบหน้าต่างเบราว์เซอร์และ UI ของ Android ที่แสดงสถานะเครือข่าย สถานะแบตเตอรี่ และแสดงองค์ประกอบแบบเต็มความกว้างของระบบ Android
</div>
</div>
</div>
</div>
</ร่างกาย>
<สคริปต์>
const l =console.log
ฟังก์ชั่นสลับ () {
const videoStageEl = document.querySelector(".video-stage")
ถ้า (videoStageEl.requestFullscreen) {
ถ้า(!document.fullscreenElement){
videoStageEl.requestFullscreen()
-
อื่น {
เอกสาร exitFullscreen()
-
} อื่น {
error.innerHTML = "อุปกรณ์นี้ไม่รองรับ API แบบเต็มหน้าจอ"
error.classList.remove("ปิด")
-
-
</script> อย่างที่คุณเห็น องค์ประกอบวิดีโออยู่ในองค์ประกอบ div#video-stage โดยมีปุ่มสลับเต็มหน้าจอ
เราต้องการให้องค์ประกอบ div#video-stage แสดงแบบเต็มหน้าจอเมื่อมีการคลิกปุ่มเพื่อสลับแบบเต็มหน้าจอ การใช้งานฟัง toggle มีดังนี้:
ฟังก์ชั่นสลับ() {
const videoStageEl = document.querySelector(".video-stage")
ถ้า(!document.fullscreenElement)
videoStageEl.requestFullscreen()
อื่น
เอกสาร exitFullscreen()
} ที่นี่ querySelector ใช้เพื่อค้นหาองค์ประกอบ div#video-stage และบันทึกอินสแตนซ์ HTMLDivElement บน videoStageEl
จากนั้น ใช้คุณสมบัติ document.fullsreenElement เพื่อพิจารณาว่า document เต็มหน้าจอหรือไม่ ดังนั้นจึงเรียกใช้ requestFullscreen() บน videoStageEl ได้ ซึ่งจะทำให้ div#video-stage ครอบครองมุมมองอุปกรณ์ทั้งหมด
หากคุณคลิกปุ่มสลับเต็มหน้าจอในโหมดเต็มหน้าจอ ระบบจะเรียก exitFullcreen บน document เพื่อให้มุมมอง UI กลับสู่มุมมองปกติ (ออกจากโหมดเต็มหน้าจอ)
แหล่งข้อมูลที่เกี่ยวข้อง:
Web Speech API ให้การสังเคราะห์เสียงพูดและการรู้จำเสียง เพิ่มฟังก์ชันการทำงาน ไปยังเว็บแอปพลิเคชัน การใช้ API นี้ทำให้เราสามารถออกคำสั่งเสียงไปยังเว็บแอปพลิเคชันได้ เช่นเดียวกับบน Android ผ่านทาง Google Speech หรือใช้ Cortana ใน Windows
ลองดูตัวอย่างง่ายๆ โดยใช้ Web Speech API เพื่อใช้การแปลงข้อความเป็นคำพูดและคำพูดเป็นข้อความ:
<body>
<ส่วนหัว>
<h2>เว็บ API<h2>
</ส่วนหัว>
<div class="web-api-cnt">
<div id="error" class="close"></div>
<div class="web-api-card">
<div class="web-api-card-head">
การสาธิต - ข้อความเป็นคำพูด
</div>
<div class="web-api-card-body">
<div>
<input placeholder="ป้อนข้อความที่นี่" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">แตะเพื่อพูด</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
การสาธิต - คำพูดเป็นข้อความ
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="ข้อความจะปรากฏที่นี่เมื่อคุณเริ่มพูด" id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">แตะและพูดใส่ไมค์</button>
</div>
</div>
</div>
</div>
</ร่างกาย>
<สคริปต์>
พยายาม {
คำพูด var = SpeechSyntheticUtterance ใหม่ ()
var SpeechRecognition = การรู้จำเสียง;
การจดจำ var = SpeechRecognition ใหม่ ()
} จับ(จ) {
error.innerHTML = "อุปกรณ์นี้ไม่รองรับ Web Speech API"
error.classList.remove("ปิด")
-
ฟังก์ชั่นพูด () {
Speech.text = textToSpeech.value
เสียงพูด.ระดับเสียง = 1
คำพูด อัตรา=1
Speech.pitch=1
window.speechSynthetic.speak (คำพูด)
-
ฟังก์ชั่น tapToSpeak() {
การจดจำ onstart = ฟังก์ชั่น () { }
Recognition.onresult = ฟังก์ชั่น (เหตุการณ์) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
SpeechToText.value = การถอดเสียง
-
การรับรู้ onerror = ฟังก์ชั่น (ev) {
คอนโซลข้อผิดพลาด (ev)
-
การจดจำเริ่มต้น()
-
</สคริปต์> 
การสาธิตครั้งแรก - การแปลงข้อความเป็นคำพูดสาธิตการใช้ API นี้ด้วยช่องป้อนข้อมูลแบบธรรมดาที่รับข้อความอินพุตและปุ่มเพื่อดำเนินการพูด
ฟังก์ชั่นพูด () {
const คำพูด = SpeechSyntheticUtterance ใหม่ ()
Speech.text = textToSpeech.value
เสียงพูด.ระดับเสียง = 1
อัตราคำพูด = 1
Speech.pitch = 1
window.speechSynthetic.speak (คำพูด)
} มันสร้างอินสแตนซ์ของวัตถุ SpeechSynthesisUtterance() และตั้งค่าข้อความที่จะพูดจากข้อความที่ป้อนในกล่องอินพุต จากนั้น ใช้ออบเจ็กต์ speech เพื่อเรียกใช้ฟังก์ชัน SpeechSynthesis#speak เพื่อพูดข้อความในกล่องอินพุตของลำโพง
การสาธิตครั้งที่สอง - คำพูดเป็นข้อความ จดจำคำพูดเป็นข้อความ คลิกปุ่มแตะและพูดใส่ไมโครโฟน แล้วพูดใส่ไมโครโฟน จากนั้นสิ่งที่เราพูดจะถูกแปลเป็นเนื้อหาในกล่องป้อนข้อความ
การคลิกปุ่มแตะและพูดใส่ไมค์จะเรียกใช้ฟังก์ชัน tapToSpeak:
function tapToSpeak() {
var SpeechRecognition = การรู้จำเสียง;
การจดจำ const = การรู้จำเสียงใหม่ ()
การจดจำ onstart = ฟังก์ชั่น () { }
Recognition.onresult = ฟังก์ชั่น (เหตุการณ์) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
SpeechToText.value = การถอดเสียง
-
การรับรู้ onerror = ฟังก์ชั่น (ev) {
คอนโซลข้อผิดพลาด (ev)
-
การจดจำเริ่มต้น()
} ที่นี่ SpeechRecognition จะถูกสร้างอินสแตนซ์ จากนั้นตัวจัดการเหตุการณ์และการโทรกลับจะถูกลงทะเบียน onstart จะถูกเรียกเมื่อการรู้จำเสียงเริ่มต้นขึ้น onerror จะถูกเรียกเมื่อมีข้อผิดพลาดเกิดขึ้น เมื่อใดก็ตามที่การรู้จำเสียงจับบรรทัด onresult จะถูกเรียก
ในการเรียกกลับ onresult ให้แตกเนื้อหาและตั้งไว้ใน textarea ดังนั้นเมื่อเราพูดใส่ไมโครโฟน ข้อความจะปรากฏในเนื้อหา textarea
แหล่งข้อมูลที่เกี่ยวข้อง:
Bluetooth API ช่วยให้เราสามารถเข้าถึงอุปกรณ์ที่ใช้พลังงานต่ำบน โทรศัพท์มือถืออุปกรณ์ที่รองรับ Bluetooth และใช้เพื่อแบ่งปันข้อมูลจากหน้าเว็บไปยังอุปกรณ์อื่น
API พื้นฐานคือ navigator.bluetooth.requestDevice การเรียกสิ่งนี้จะทำให้เบราว์เซอร์แจ้งผู้ใช้ด้วยตัวเลือกอุปกรณ์ ซึ่งผู้ใช้สามารถเลือกอุปกรณ์หรือยกเลิกคำขอได้ navigator.bluetooth.requestDevice จำเป็นต้องมีวัตถุบังคับ วัตถุนี้กำหนดตัวกรองที่ส่งคืนอุปกรณ์ Bluetooth ที่ตรงกับตัวกรอง
ลองดูตัวอย่างง่ายๆ โดยใช้ navigator.bluetooth.requestDevice API เพื่อดึงข้อมูลอุปกรณ์พื้นฐานจากอุปกรณ์ BLE:
<body>
<ส่วนหัว>
<h2>เว็บ API<h2>
</ส่วนหัว>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
การสาธิตบลูทูธ
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<div>ชื่ออุปกรณ์: <span id="dname"></span></div>
<div>รหัสอุปกรณ์: <span id="did"></span></div>
<div>อุปกรณ์ที่เชื่อมต่อ: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">รับอุปกรณ์ BLE</button>
</div>
</div>
</div>
</div>
</ร่างกาย>
<สคริปต์>
ฟังก์ชั่น BluetoothAction () {
ถ้า (navigator.bluetooth) {
navigator.bluetooth.requestDevice({
ยอมรับอุปกรณ์ทั้งหมด: จริง
}).แล้ว(อุปกรณ์ => {
dname.innerHTML = อุปกรณ์.ชื่อ
did.innerHTML = อุปกรณ์.id
dconnected.innerHTML = อุปกรณ์เชื่อมต่อ
}).catch(ผิดพลาด => {
error.innerHTML = "โอ้พระเจ้า!! มีบางอย่างผิดพลาด"
error.classList.remove("ปิด")
-
} อื่น {
error.innerHTML = "ไม่รองรับบลูทูธ"
error.classList.remove("ปิด")
-
-
</สคริปต์> 
ข้อมูลอุปกรณ์จะแสดงที่นี่ การคลิกปุ่มรับอุปกรณ์ BLE จะเรียกใช้ฟังก์ชัน bluetoothAction :
function bluetoothAction(){
navigator.bluetooth.requestDevice({
ยอมรับอุปกรณ์ทั้งหมด: จริง
}).แล้ว(อุปกรณ์ => {
dname.innerHTML = อุปกรณ์.ชื่อ
did.innerHTML = อุปกรณ์.id
dconnected.innerHTML = อุปกรณ์เชื่อมต่อ
}).catch(ผิดพลาด => {
console.error("โอ้พระเจ้า!! มีบางอย่างผิดพลาด")
-
} ฟังก์ชัน bluetoothAction เรียก navigator.bluetooth.requestDevice API พร้อมด้วยตัวเลือก acceptAllDevices：true ซึ่งจะทำให้สแกนและแสดงรายการอุปกรณ์ที่ใช้งาน Bluetooth ที่อยู่ใกล้เคียงทั้งหมด โดยจะส่งคืน promise ดังนั้นให้แก้ไขเพื่อรับอุปกรณ์พารามิเตอร์จากฟังก์ชันการโทรกลับ พารามิเตอร์อุปกรณ์นี้จะเก็บข้อมูลของอุปกรณ์ Bluetooth ที่อยู่ในรายการ นี่คือที่ที่เราใช้คุณสมบัติเพื่อแสดงข้อมูลบนอุปกรณ์
แหล่งข้อมูลที่เกี่ยวข้อง:
API การสั่นสะเทือน Vibration API สามารถทำให้อุปกรณ์ของเราสั่นได้ เนื่องจากเป็น A วิธีที่เราควรตอบสนองต่อการแจ้งเตือนหรือข้อเสนอแนะทางกายภาพของข้อมูลใหม่
วิธีดำเนินการสั่นสะเทือนคือ navigator.vibrate(pattern) pattern คือตัวเลขตัวเดียวหรืออาร์เรย์ของตัวเลขที่อธิบายรูปแบบการสั่น
ซึ่งจะทำให้อุปกรณ์หยุดสั่นหลังจากผ่านไป 200 มิลลิวินาที:
navigator.vibrate(200) navigator.vibrate([200])
สิ่งนี้จะทำให้อุปกรณ์สั่นเป็นเวลา 200 ms หยุดชั่วคราวเป็นเวลา 300 ms และสุดท้ายสั่นเป็นเวลา 400 ms และหยุด:
navigator.vibrate([200, 300, 400])
สามารถผ่าน 0 ได้ [], [ 0,0,0] เพื่อขจัดการสั่นสะเทือน
ลองดูตัวอย่างง่ายๆ:
<body>
<ส่วนหัว>
<h2>เว็บ API<h2>
</ส่วนหัว>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
การสาธิตการสั่นสะเทือน
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<input id="vibTime" type="number" placeholder="เวลาการสั่นสะเทือน" />
</div>
<div>
<button onclick="vibrate()">สั่น</button>
</div>
</div>
</div>
</div>
</ร่างกาย>
<สคริปต์>
ถ้า (navigator.vibrate) {
ฟังก์ชั่นสั่น () {
เวลา const = vibTime.value
ถ้า(เวลา != "")
นาวิเกเตอร์สั่น (เวลา)
-
} อื่น {
error.innerHTML = "ไม่รองรับ API แบบสั่นในอุปกรณ์นี้"
error.classList.remove("ปิด")
-
</script> มีกล่องป้อนข้อมูลและปุ่มอยู่ที่นี่ ป้อนระยะเวลาของการสั่นในช่องป้อนข้อมูลแล้วกดปุ่ม อุปกรณ์ของเราจะสั่นตามเวลาที่ป้อน
แหล่งข้อมูลที่เกี่ยวข้อง:
Broadcast Channel API ช่วยให้การเรียกดูที่แตกต่างกันจาก แหล่งกำเนิดเดียวกัน บริบทสื่อสารข้อความหรือข้อมูล บริบทการเรียกดูหมายถึงหน้าต่าง แท็บ iframe ผู้ปฏิบัติงาน ฯลฯ
คลาส BroadcastChannel ใช้เพื่อสร้างหรือเข้าร่วมช่อง:
const PoliticsChannel = new BroadcastChannel("politics") politics คือชื่อของช่อง บริบทใดๆ ที่เริ่มต้นตัวสร้าง BroadcastChannel โดยใช้ politics จะเข้าร่วมกับช่อง politics ส่งทางช่องและสามารถส่งข้อความถึงช่องได้
หากเป็นตัวสร้าง BroadcastChannel ตัวแรกที่มี politics ช่องจะถูกสร้างขึ้น คุณสามารถใช้ BroadcastChannel.postMessage API เพื่อโพสต์ข้อความไปยังช่องได้ ใช้ BroadcastChannel.onmessage API เพื่อสมัครรับข้อความช่อง
มาดูแอปพลิเคชันแชทง่ายๆ:
<body>
<ส่วนหัว>
<h2>เว็บ API<h2>
</ส่วนหัว>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
สาธิต-ออกอากาศช่อง
</div>
<div class="web-api-card-body">
<div class="page-info">เปิดหน้านี้ใน <i>แท็บ</i>, <i>หน้าต่าง</i> หรือ <i>iframe</i> อื่นเพื่อแชทกับพวกเขา</div>
<div id="error" class="close"></div>
<div id="displayMsg" style="font-size:19px;text-align:left;">
</div>
<div class="chatArea">
<input id="input" type="text" placeholder="พิมพ์ข้อความของคุณ" />
<button onclick="sendMsg()">ส่งข้อความถึงช่อง</button>
</div>
</div>
</div>
</div>
</ร่างกาย>
<สคริปต์>
const l = console.log;
พยายาม {
var PoliticsChannel = ใหม่ BroadcastChannel("การเมือง")
PoliticsChannel.onmessage = onMessage
var userId = Date.now()
} จับ(จ) {
error.innerHTML = "BroadcastChannel API ไม่รองรับในอุปกรณ์นี้"
error.classList.remove("ปิด")
-
input.addEventListener("keydown", (e) => {
ถ้า (e.keyCode === 13 && e.target.value.trim().length > 0) {
ส่งข้อความ()
-
-
ฟังก์ชั่น onMessage (e) {
const {msg,id}=e.data
const newHTML = "<div class='chat-msg'><span><i>"+id+"</i>: "+msg+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
displayMsg.scrollTop = displayMsg.scrollHeight
-
ฟังก์ชั่น sendMsg() {
PoliticsChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>ฉัน</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
อินพุตค่า = ""
displayMsg.scrollTop = displayMsg.scrollHeight
-
</script> นี่คือข้อความและปุ่มธรรมดา ป้อนข้อความของคุณและกดปุ่มเพื่อส่ง ข้อมูลต่อไปนี้เตรียมข้อมูลเบื้องต้น politicalChannel และตั้งค่า Listener เหตุการณ์ onmessage บน politicalChannel เพื่อให้สามารถรับและแสดงข้อความได้
การคลิกปุ่มจะเรียกฟังก์ชัน sendMsg ส่งข้อความไปยังช่อง politics ผ่าน BroadcastChannel#postMessage API แท็บ iframe หรือผู้ปฏิบัติงานใดๆ ที่เริ่มต้นสคริปต์นี้จะได้รับข้อความที่ส่งจากที่นี่ ดังนั้นหน้านี้จะได้รับข้อความที่ส่งจากบริบทอื่น แหล่งข้อมูลที่เกี่ยวข้อง:
เช่น คัดลอก ตัด และวางเป็นแอปพลิเคชัน บางส่วน ของคุณสมบัติที่พบบ่อยที่สุดใน . Clipboard API ช่วยให้ผู้ใช้เว็บสามารถเข้าถึงคลิปบอร์ดของระบบและดำเนินการคลิปบอร์ดพื้นฐานได้
ก่อนหน้านี้ คุณสามารถใช้ document.execCommand เพื่อโต้ตอบกับคลิปบอร์ดของระบบได้ API คลิปบอร์ดแบบอะซิงโครนัสสมัยใหม่ให้การเข้าถึงโดยตรงเพื่ออ่านและเขียนเนื้อหาของคลิปบอร์ด
อ่านเนื้อหาจากคลิปบอร์ด:
navigator.clipboard.readText().then(clipText =>
document.getElementById("กล่องขาออก").innerText = clipText
); เขียนเนื้อหาลงในคลิปบอร์ด:
ฟังก์ชั่น updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* ตั้งค่าคลิปบอร์ดสำเร็จแล้ว */
}, การทำงาน() {
/* เขียนคลิปบอร์ดล้มเหลว */
-
} แหล่งข้อมูลที่เกี่ยวข้อง:
Share API สามารถช่วยเราใช้ฟังก์ชันการแชร์บนเว็บแอปพลิเคชันได้ มันให้ความรู้สึกการแบ่งปันแบบมือถือ ทำให้สามารถแชร์ข้อความ ไฟล์ และลิงก์ไปยังแอปพลิเคชันอื่นบนอุปกรณ์ของคุณได้
Web Share API สามารถเข้าถึงได้ผ่านเมธอด navigator.share :
if (navigator.share) {
นาวิเกเตอร์.แชร์({
หัวเรื่อง: 'ไป่ตู้',
ข้อความ: 'ไป่ตู้',
URL: '<https://www.baidu.com/>',
-
.then(() => console.log('การแชร์สำเร็จ'))
.catch((error) => console.log('การแชร์ล้มเหลว', ข้อผิดพลาด));
} โค้ดข้างต้นใช้การแบ่งปันข้อความโดยใช้ JavaScript ดั้งเดิม โปรดทราบว่าเราสามารถเรียกการดำเนินการนี้ได้โดยใช้เหตุการณ์ onclick เท่านั้น:
function Share({ label, text, title }) {
const shareDetails = { ชื่อ, ข้อความ };
const handleSharing = async () => {
ถ้า (navigator.share) {
พยายาม {
รอ navigator.share(shareDetails).then(() => console.log("ส่งแล้ว"));
} จับ (ข้อผิดพลาด) {
console.log(`อ๊ะ! ฉันไม่สามารถแบ่งปันให้โลกได้รับรู้เพราะ: ${error}`);
-
} อื่น {
// รหัสสำรอง
console.log(
"เบราว์เซอร์นี้ไม่รองรับการแชร์เว็บในขณะนี้ โปรดโทรกลับ"
-
-
-
กลับ (
<ปุ่ม onClick={handleSharing}>
<span>{label}</span>
</ปุ่ม>
-
} แหล่งข้อมูลที่เกี่ยวข้อง: