Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

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



 
Clound SSD Virtual Server

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

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


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
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .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
   







Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่