Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > บทความจากสมาชิก > ตัวอย่างการเขียน Javascript เพื่อจัดการเนื้อหาใน IFrame

ตัวอย่างการเขียน 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

Total Votes: 205Overall Rating: 4.1 / 5

Share


	By :	Kenessar
	Article :	บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
	Score Rating :
	Create Date :	2012-07-05
	Download :	(0.0015 MB)

Sponsored Links

Comunity Forum

Free Web Script

Jobs Freelance

Free Uploads

Free Web Hosting

Free Tools

สอน PHP ผ่าน Youtube ฟรี

สอน Android การเขียนโปรแกรม Android

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน iOS การเขียนโปรแกรม iPhone, iPad

สอน Java การเขียนโปรแกรม ภาษา Java

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

สอน JSP การเขียนโปรแกรม ภาษา Java

สอน .Net การเขียนโปรแกรม ภาษา .Net

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว

Hit Link

แลกเปลี่ยน Exchange Link