|
| |
ตัวอย่างการเขียน Javascript เพื่อจัดการเนื้อหาใน IFrame |
ตัวอย่างการเขียน Javascript เพื่อจัดการเนื้อหาใน IFrame IFrame คือแท็กหนึ่งใน HTML ซึ่งจะเป็นกรอบสี่เหลี่ยม ที่มีการแสดงผลเป็นหน้าเว็บ HTML อยู่ด้านใน ในการเขียน Javascript เพื่อจัดการข้อมูลต่างๆในหน้าเว็บนั้น ทำได้ง่ายๆโดยการใช้ Javascript จัดการควบคุมโครงสร้างเว็บที่มีลักษณะคล้ายๆกับโหนดต้นไม้ หรือที่เราเรียกว่า DOM (Document Object Model)
โดยโครงสร้างต่างๆ ไม่ว่าจะเป็นแท็ก หรือข้อความ เราจะเรียกว่า Element นะครับ และจะอยู่ภายใน Document Object ซึ่งเป็นตัวโครงสร้างของหน้าเว็บนั่นแหละครับ ขอยกตัวอย่างการจัดการ Element ต่างๆโดยการใช้ Javascript ดังต่อไปนี้นะครับ
สมมุติถ้าผมจะแก้ไขข้อความในแท็ก โดยการระบุไอดีของมัน ผมก็จะใช้เมธอดชื่อ getElementById ของ Document มาใช้นะครับ
Code (HTML + Javascript)
<div id="mydiv">Hello World!</div>
<script type="text/javascript">
document.getElementById("mydiv").innerHTML = "Hello John!";
</script>
จากโค้ดด้านบนเป็นการค้นหา element ที่มีไอดีเป็น mydiv และแก้ไขข้อความด้านในด้วยแอททริบิวต์ชื่อ innerHTML ตัวอักษรที่อยู่ใน div ที่มีไอดีเป็น mydiv ก็จะเปลี่ยนจาก Hello World! กลายเป็น Hello John!
ต่อไป ถ้าต้องการค้นหา Element จากชื่อแท็กบ้าง ทำอย่างไร?
ให้ใช้ getElementsByTagName (สังเกตุนะครับ Elements มี s ด้วย แสดงว่าหลายตัว...) โดยถ้ามันหาแท็กที่ระบุเจอมันจะคืนค่ามาเป็นอาเรย์ ของ DOM Element ครับ
สมมุติผมจะเปลี่ยนสีตัวอักษรของย่อหน้าที่สอง ให้เป็นสีแดง ผมจะเขียนแบบนี้ จะใช้ getElementsByTagName และ แก้สีผ่านแอททริบิวต์ style.color ครับ
Code (HTML + Javascript)
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script type="text/javascript">
document.getElementsByTagName("p")[1].style.color = "#F00";
</script>
สังเกตุตรง index ข้างหลัง document.getElementsByTagName("p") ครับ มันเป็น 1 ซึ่งก็คือ เลือกแท็ก p ตัวที่สองมา แล้วก็เอามาแก้สี
เรื่องของการใช้ DOM ลองหาอ่านใน https://www.thaicreate.com เอานะครับผม มีเยอะแยะเลย
เริ่มจัดการ IFrame
การที่จะเรียกใช้ Document Object ของ IFrame เราจะเรียกใช้ผ่าน .contentDocument ของมันนะครับ
และ การที่จะเรียกใช้ Window Object ของ IFram eเราจะเรียกใช้ผ่าน .contentWindow ของมันครับ
ดูตัวอย่างด้านล่างนี้ครับนี่คือเนื้อหาใน IFrame ผมทำฟังก์ชั่นไว้เปลี่ยนสีแท็ก p เอาไว้ด้วย แต่จะให้ข้างนอกเรียกใช้เข้ามา แน่นอน เราจะต้องอ้างหา Window Object ของมันก่อนครับ (พวก function javascript ที่เราเขียนขึ้นมา มันจะเพิ่มเข้ามาอยู่ใน window object เองครับ ดังนั้นเราต้องหา window object ของเพจนั้นๆให้เจอก่อนนั่นเอง)
Code (HTML)
<html>
<head>
<title>IFrame Content</title>
<script type="text/javascript">
function highlightIt(index) {
document.getElementsByTagName("p")[index].style.color = "#F00";
}
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus feugiat leo, sed porttitor sem semper sit amet. Mauris porttitor metus quis est adipiscing sed aliquet purus ornare. Proin vulputate neque non urna porttitor pulvinar semper nunc blandit. Fusce sed lacus ac quam elementum ornare. Nunc ullamcorper, metus eu dapibus eleifend, velit est suscipit mi, ac vehicula massa quam id turpis. Suspendisse ut odio sed risus aliquam commodo non eu felis. Vivamus in velit sed velit tristique varius ut eu nisi. Donec placerat, nibh at congue feugiat, nulla libero fermentum augue, mattis tristique nisi elit in orci. Aliquam a neque quam, quis aliquet mauris. Aliquam vehicula lacus et tellus lobortis vehicula ac id dui. Sed at sem lobortis orci tempus vehicula vel ut nisi. Proin pellentesque dapibus lorem vel blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum laoreet, ante sed viverra hendrerit, odio nibh ornare enim, id porta tortor leo in ante.</p>
<p>Aenean turpis ante, molestie eu bibendum et, suscipit non lacus. Pellentesque condimentum, lorem in pretium fringilla, sem turpis molestie lacus, eget rhoncus sapien purus at purus. Fusce at lorem sed quam facilisis posuere. Integer ornare consectetur lorem vel cursus. Nunc malesuada, lacus sit amet iaculis ullamcorper, nibh felis ullamcorper ligula, ut pellentesque leo magna sit amet justo. Fusce bibendum varius urna, eu placerat lectus ornare nec. Duis sagittis, augue in tincidunt pellentesque, odio nulla tincidunt dolor, quis sagittis lacus velit non nisi.</p>
</body>
</html>
และด้านล่างนี้เป็นโค้ดของหน้าหลัก ผมจะทำ iframe มาแล้วชี้ลิ้งค์ไปหาหน้าก่อนหน้านี้ และก็ทำปุ่มมาสองปุ่มด้วย
ปุ่มแรก ผมจะเปลี่ยนสีของแท็ก p แรกใน iframe ให้เป็นสีแดง
ด้วยการอ้างถึง contentDocument (DOM ของ IFrame นั้นๆ) และปุ่มที่สอง จะเป็นการอ้างหา contentWindow ของ IFrame นั้นๆ แล้วเรียก function javascript ที่ผมได้เขียนไว้ก่อนหน้านั้น (คือสั่งจากเพจหลัก ให้ iframe ใช้ function นั้น)
Code (HTML + Javascript)
<html>
<body>
<button id="p-1">Highlight Paragraph 1</button>
<button id="p-2">Highlight Paragraph 2</button>
<br />
<iframe id="my-iframe" src="iframe_content.html" width="500" height="350"></iframe>
<script type="text/javascript">
var button1 = document.getElementById("p-1");
var button2 = document.getElementById("p-2");
var myIframe = document.getElementById("my-iframe");
button1.onclick = function(e) {
myIframe.contentDocument.getElementsByTagName("p")[0].style.color = "#F00";
};
button2.onclick = function(e) {
myIframe.contentWindow.highlightIt(1);
};
</script>
</body>
</html>
จะเห็นได้ว่า ถ้าเราอ้างหา window ของ iframe (อ้างผ่าน contentWindow) และ document ของ iframe ( contentDocument) เราจะควบคุมได้ดั่งใจ
สมมุติผมอยากเขียน html ลงไปใน iframe ผมก็อ้างหา iframe ก่อน แล้วใช้ document.write เช่น
Code
var myIframe = document.getElementById("my-iframe");
myIframe.contentDocument.write("Wooooooooooooooow!!");
ก็จะเป็นการเพิ่มข้อความ Wooooooooooooooow!! ไว้ด้านท้ายสุดของเพจ
หรือบางคนถนัด jQuery ก็เอา contentDocument ไปใช้ก็ได้ครับ แบบนี้
Code (Javascript)
<script type="text/javascript">
<iframe id="my-iframe" src="iframe_content.html" width="500" height="350"></iframe>
var myIframe = document.getElementById("my-iframe");
var frameContent = myIframe.contentDocument;
$("p", frameContent).css("background: yellow");
</script>
ผมได้แนบตัวอย่างมาด้วย ลองนำไปประยุกต์ใช้ดูนะครับ น่าจะเอาไปใช้ประโยชน์ได้หลายอย่าง เช่น บางทีอยากจะกดปุ่มนึง แล้วให้ปริ้นท์รูปใดรูปหนึ่ง เราอาจจะทำไอเฟรมเปล่าๆไม่มีความกว้าง ไม่มีความสูงมาอันนึง แล้วใส่แท็ก img และอ้างหารูปที่ต้องการลงไปในนั้น และเพิ่ม javascipt ให้พิมพ์รูปนั้นโดยยัด <script>window.print();</script> ลงไปตามท้าย แค่นี้ก็ปริ้นท์รูปได้โดยไม่ต้องเปิดหน้าใหม่ และไม่มีเนื้อหาอื่นติดมานอกจากรูปนั้นแล้วครับ
นี่เป็นตัวอย่างหนึ่งนะครับ จริงๆแล้วยังนำไปใช้ได้อีกหลายอย่างครับ ลองดูครับ
ข้อจำกัด
ด้วยเหตุผลด้านความปลอดภัย เราจะสามารถจัดการเนื้อหาใน iframe ได้ถ้าเพจที่อยู่ในนั้น อยู่ใน domain เดียวกันกับเรา สมมุตถ้าเราเปิดเว็บอื่นไว้ด้านใน iframe เราจะไม่สามารถแก้ไขอะไรได้ เช่นกันถ้าคนอื่นเปิดเว็บเราใน iframe เขาก็ไม่สามารถแก้ไขหน้าตาเว็บเราได้เช่นกันครับ
DOM IFrame : http://www.w3schools.com/jsref/dom_obj_frame.asp
Reference : http://www.codezy.com
|
|
| |
By : |
Kenessar
|
| |
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
| |
Score Rating : |
 |
| |
Create Date : |
2012-07-05 |
| |
Download : |
(0.0015 MB) |
|
|
Sponsored Links |
|
|
|
|
|
|
Load balance : Server 05
