เป็นตัวอย่างการเพิ่มและลบ iframe บนหน้าเว็บเพจโดยที่ไม่ต้องโหลดหน้าเอกสารใหม่ หรือก้อคือทำการเพิ่มหรือ ลบแท็ก HTML ทีนี้เราก้อสามารถทำให้เว็บเพจทำงานแบบ Interactive ได้หรือกระทำทันทีโดยไม่ต้องโหลด Code ใหม่ อธิบายไปๆมาๆ ชักงง ดูตัวอย่างเลยดีกว่า
เพิ่ม แท็ก iframe ต่อท้ายไปเรื่อยๆ ด้วย innerHTML
กรุณาพิมพ์ URL ที่ต้องการ ( ไม่ต้องเติม "http://" ) และทำการกดปุ่มข้างๆ เพื่อประมวลผล กดแล้ว กรุณารอสักครู่...
|
วิธีการ คือ กำหนดจุด มาร์คไว้เพื่อใช้อ้างอิงเวลาต้องการเพื่ม แท็กอีก และตั้งชื่อไว้ด้วย <div id='iframediv'> </div> ในที่นี้ชื่อ iframediv
ทีนี้เวลาเพิ่มแท็กจะอยู่ใน ส่วนของการเขียน โค๊ดคำสั่ง Javascript ในที่นี้ชื่อฟังก์ชัน insertiframe ที่โค๊ด node = document.getElementById("iframediv"); ทำการใช้ ตัวแปร node ชี้ไปตรงจุดที่มี ชื่อ id ว่า iframediv
ถัดมาทำการสร้างแท็ก DIV ด้วยคำสั่งของ JavaScript ไปเก็บไว้ที่ตัวแปร myElement ด้วยโค๊ดดังนี้ var myElement = document.createElement("DIV");
ตามด้วยตั้ง Attribute ของ แท็ก DIV ที่สร้างเมื่อกี๊เพื่อใช้ในการลบน่ะ ส่วน node_no แทนตัวเลขน่ะคับ ตัวแปรจะได้ไม่ซ้ำกัน ด้วยคำสั่ง myElement.setAttribute("id","iframechild" + node_no );
เอาแท็กที่สร้างไว้ในตัวแปร myElement ไปไว้ต่อจากจุดที่ตัวแปร node ชี้อยู่ ด้วยคำสั่ง node.appendChild(myElement);
สุดท้าย ก้อเพิ่มแท็ก iframe ลงไปใน DIV ที่สร้างขึ้นคับ จริงแล้วเราจะเพิ่ม แท็กไรก้อได้นะคับ
* สรุปอีกที เวลาเราจะลบก้อไปลบที่ แท็ก DIV ซึ่งตอนสร้างเรา ตั้งชื่อ id ไว้แล้ว ลองไล่ดูนะคับ ไม่น่าจะยาก
/***************************************************
* Author : o2mini
* Project : insert_remove_iframe.html
* Creation Date :Setepber 2005
* Description : insert and remove tag iframe
* using innerHTML, getElementById (interacive HTML)
*
*ตัวอย่าง โค๊ดที่ใช้ทดสอบด้านบนและประกอบคำ อธิบาย
***************************************************/
<script language="javascript">
var node_no = 0;
function insertiframe (url) {
var node;
if (document.getElementById) {
node = document.getElementById ("iframediv");
if (node) {
var myElement = document.createElement ("DIV");
myElement.setAttribute("id","iframechild" + node_no );
node.appendChild(myElement); myElement.innerHTML = "<iframe id='iframe" + node_no +
"' src='http://" + url + "' " + "width='95%' height='300'></iframe><br>" +
"<input type='button' value=' ลบแท็ก iframe นี้ URL ( " + url +
" )' onclick='removeiframe("+node_no+");'>";
node_no++;
}
else {
alert("ฟังก์ชัน insertIframe หาแท็ก iframediv ไม่เจอในเอกสาร HTML");
return;
}
}
else {
alert("JavaScript เวอร์ชันนี้ไม่สนับสนุน คำสั่ง document.getElementByID" );
return;
}
}
function removeiframe (node_no) {
var node;
if (document.getElementById) {
node = document.getElementById ("iframediv");
if (node) {
node.removeChild( document.getElementById("iframechild" + (node_no)) );
}
else {
alert("ฟังก์ชัน removeiframe หาแท็ก iframediv ไม่เจอในเอกสาร HTML");
return;
}
}
else {
alert("JavaScript เวอร์ชันนี้ไม่สนับสนุน คำสั่ง document.getElementByID" );
return;
}
}
</script>
<p>เพิ่ม แท็ก iframe ต่อท้ายไปเรื่อยๆ ด้วย innerHTML
<br><br>กรุณาพิมพ์ URL ที่ต้องการ ( ไม่ต้องเติม "http://" )
และทำการกดปุ่มข้างๆ เพื่อประมวลผล <font color='red'>กดแล้ว กรุณารอ สักครู่...</font></p>
<form>
<input type='text' name='gourl' value='o2mini.exteen.com'>
<input type='button' name='activate' value='เพิ่มแท็ก iframe และลิงก์ ตาม URL นี้' onclick='insertiframe(gourl.value);'>
<br>
</form>
<hr>
<div id='iframediv'> </div>
|
ข้อมูลเพิ่มเติม (http://www2.schmidetzki.net/WebGatePublisher/schmidetzki/html/default/webb-69aq5g.de.html;:-1)
