บล็อกนี้จะอธิบายวิธีเปลี่ยนแหล่งที่มาของ iframe ใน JavaScript
อินไลน์เฟรมคืออะไร?
หนึ่ง ' กรอบอินไลน์ ” ใช้เพื่อบรรจุเอกสารอื่นที่ระบุภายในเอกสารปัจจุบัน ส่งผลให้เปลี่ยนหน้าเว็บตามลิงก์ที่ระบุ
จะเปลี่ยนแหล่งที่มาของ Iframe ใน JavaScript ได้อย่างไร
แหล่งที่มาของ Iframe สามารถเปลี่ยนแปลงได้ใน JavaScript โดยใช้วิธีการต่อไปนี้พร้อมกับ ' getElementById() ' กระบวนการ:
- “ ผ่านพารามิเตอร์ เทคนิค
- “ ดัชนีที่เลือก ' คุณสมบัติ.
วิธีที่ 1: เปลี่ยนแหล่งที่มาของ Iframe ใน JavaScript โดยใช้เทคนิคพารามิเตอร์ที่ส่งผ่าน
เทคนิคนี้สามารถใช้เพื่อสลับไปยังหน้าที่ระบุโดยการวางลิงก์ของหน้าที่เกี่ยวข้องเป็นพารามิเตอร์ของฟังก์ชันเมื่อเข้าถึงด้วยความช่วยเหลือของปุ่ม
ตัวอย่าง
ลองทำตามตัวอย่างที่ระบุไว้ด้านล่าง:
< ศูนย์กลาง >< ชั่วโมง2 > เปลี่ยนแหล่งที่มาของ iframe ใน จาวาสคริปต์ ชั่วโมง2 >
< รหัสไอเฟรม = 'หน้าเว็บ' src = 'https://linuxhint.com/detect-tab-key-javascript/' ความกว้าง = '1,000' ความสูง = '550' กรอบชายแดน = '0' เลื่อน = 'ไม่' > ไอเฟรม >
< br >< br >
< ปุ่มบนคลิก = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > คลิกเพื่อแสดงหน้าคำสั่ง Linux ปุ่ม >
< br > br >
ศูนย์กลาง >
ในบรรทัดโค้ดด้านบน ให้ทำตามขั้นตอนต่อไปนี้:
- ระบุลิงค์ที่ระบุในช่อง “ <อินไลน์เฟรม> ” แท็กพร้อมกับขนาดที่ปรับ
- นอกจากนี้ ให้สร้างปุ่มที่มีไฟล์แนบ “ เมื่อคลิก ” เหตุการณ์ที่เปลี่ยนเส้นทางไปยังฟังก์ชัน changeIframe() โดยมีลิงก์ที่ระบุเป็นพารามิเตอร์
- ซึ่งจะส่งผลในการนำหน้าไปยังลิงก์ที่ระบุเมื่อคลิกปุ่ม
มาต่อที่ส่วน JavaScript ของโค้ดกัน:
< ประเภทสคริปต์ = 'ข้อความ/จาวาสคริปต์' >
การทำงาน เปลี่ยนไอเฟรม ( เปลี่ยน ) {
เอกสาร. getElementById ( 'หน้าเว็บ' ) . src = เปลี่ยน ;
}
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ประกาศฟังก์ชันชื่อ “ เปลี่ยนไอเฟรม () '.
- ในคำจำกัดความ เข้าถึงลิงก์ที่ระบุใน ' กรอบอินไลน์ ” องค์ประกอบโดยใช้ “ document.getElementById() ' กระบวนการ.
- หลังจากนั้นให้ใช้ “ src ” แอตทริบิวต์และจัดสรรลิงก์ที่ระบุเมื่อฟังก์ชันเข้าถึงลิงก์ที่เข้าถึงโดยใช้พารามิเตอร์ “ เปลี่ยน '.
- ซึ่งจะส่งผลให้มีการสลับหน้าตามลิงก์ที่ระบุเมื่อคลิกปุ่ม
เอาต์พุต
ในเอาต์พุตด้านบน สังเกตได้ว่าหน้าจะสลับเมื่อคลิกปุ่ม
วิธีที่ 2: เปลี่ยนแหล่งที่มาของ Iframe ใน JavaScript โดยใช้คุณสมบัติ SelectedIndex
“ ดัชนีที่เลือก คุณสมบัติ ” ส่งคืนดัชนีของตัวเลือกที่เลือกในรายการแบบเลื่อนลง สามารถใช้คุณสมบัตินี้เพื่อเปลี่ยนเส้นทางไปยังลิงก์ที่ระบุตามค่าของตัวเลือกที่เลือกจากรายการแบบเลื่อนลง
ตัวอย่าง
ลองสังเกตตัวอย่างต่อไปนี้:
< รหัสไอเฟรม = 'หน้าเว็บ' src = 'https://linuxhint.com/detect-tab-key-javascript/' ความกว้าง = '1,000' ความสูง = '550' กรอบชายแดน = '0' เลื่อน = 'ไม่' > ไอเฟรม >
< br >< br >
< เลือกรหัส = 'ลิงค์' >
< ค่าตัวเลือก = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > สลับไปยังบทความ 1
< ค่าตัวเลือก = 'https://linuxhint.com/convert-array-to-object-javascript/' > สลับไปยังบทความ สอง
เลือก >
< br >< br >
< ปุ่มคลิก = 'changeIframe();' > เปลี่ยน Iframe Src ปุ่ม >
< br >< br >
ร่างกาย > ศูนย์กลาง >
ในบรรทัดโค้ดด้านบน ให้ทำตามขั้นตอนต่อไปนี้:
- เรียกคืนขั้นตอนการระบุลิงค์ที่ระบุภายใน “