<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>S i X h E a D { ? } &#187; window.close</title>
	<atom:link href="http://sixhead.com/tag/windowclose/feed/" rel="self" type="application/rss+xml" />
	<link>http://sixhead.com</link>
	<description>เมื่อความรู้มีไว้แบ่งปัน</description>
	<lastBuildDate>Tue, 31 Aug 2010 05:48:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>เขียน javascript เล่นกับ popup และ opener</title>
		<link>http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/</link>
		<comments>http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/#comments</comments>
		<pubDate>Fri, 25 Jan 2008 19:08:49 +0000</pubDate>
		<dc:creator>Pipo</dc:creator>
				<category><![CDATA[Web Developer]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[popup]]></category>
		<category><![CDATA[window.close]]></category>
		<category><![CDATA[window.opener]]></category>

		<guid isPermaLink="false">http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/</guid>
		<description><![CDATA[พอดีต้องเขียน javascript สั้นๆ เป็นตัวอย่างไปให้ programmer อีกท่านที่ไม่ถนัด javascript เลยคิดว่าน่าจะเอามาเล่าให้ฟัง การทำงานคือ หน้าต่างหลักมี text field อยู่ พอกดปุ่มจะเปิด popup ขึ้นมาโดยจะมี textarea เพื่อกรอกข้อมูล พอกดปุ่ม submit ค่าที่อยู่ใน textarea จาก popup จะไปอยู่ใน text field ตัวหน้าต่างหลัก, แปลงจากขึ้นบรรทัดใหม่เป็น : แทน และ popup ปิดตัวเอง ตามรูป ขออธิบายส่วนที่น่าสนใจแล้วกันนะครับ ไฟล์ test.html (หน้าต่างหลัก) &#160; // function นี้มีไว้เพื่อสร้าง popup ให้อยู่กลางจอเสมอ function popUpWindow&#40;URL, N, W, H, S&#41; &#123; // name, width, [...]]]></description>
			<content:encoded><![CDATA[<p>พอดีต้องเขียน javascript สั้นๆ เป็นตัวอย่างไปให้ programmer อีกท่านที่ไม่ถนัด javascript<br />
เลยคิดว่าน่าจะเอามาเล่าให้ฟัง</p>
<p>การทำงานคือ หน้าต่างหลักมี text field อยู่ พอกดปุ่มจะเปิด popup ขึ้นมาโดยจะมี textarea <br />
เพื่อกรอกข้อมูล พอกดปุ่ม submit ค่าที่อยู่ใน textarea จาก popup จะไปอยู่ใน text field<br />
ตัวหน้าต่างหลัก, แปลงจากขึ้นบรรทัดใหม่เป็น : แทน และ popup ปิดตัวเอง ตามรูป</p>
<p><span id="more-9"></span></p>
<p><img width="392" height="272" src="http://sixhead.com/wp-content/uploads/image/javascript/javascript-popup-and-window-opener.png" alt="" /><br />
ขออธิบายส่วนที่น่าสนใจแล้วกันนะครับ</p>
<p>ไฟล์ test.html (หน้าต่างหลัก)</p>
<pre class="javascript">&nbsp;
<span style="color: #009900; font-style: italic;">// function นี้มีไว้เพื่อสร้าง popup ให้อยู่กลางจอเสมอ</span>
<span style="color: #003366; font-weight: bold;">function</span> popUpWindow<span style="color: #66cc66;">&#40;</span>URL, N, W, H, S<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #009900; font-style: italic;">// name, width, height, scrollbars</span>
<span style="color: #003366; font-weight: bold;">var</span> winleft    =    <span style="color: #66cc66;">&#40;</span>screen.<span style="color: #006600;">width</span> - W<span style="color: #66cc66;">&#41;</span> / <span style="color: #CC0000;">2</span>;
<span style="color: #003366; font-weight: bold;">var</span> winup    =    <span style="color: #66cc66;">&#40;</span>screen.<span style="color: #006600;">height</span> - H<span style="color: #66cc66;">&#41;</span> / <span style="color: #CC0000;">2</span>;
winProp        =    <span style="color: #3366CC;">'width='</span>+W+<span style="color: #3366CC;">',height='</span>+H+<span style="color: #3366CC;">',left='</span>+winleft+<span style="color: #3366CC;">',top='</span> +winup+<span style="color: #3366CC;">',scrollbars='</span>+S+<span style="color: #3366CC;">',resizable'</span> + <span style="color: #3366CC;">',status=yes'</span>
Win            =    window.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span>URL, N, winProp<span style="color: #66cc66;">&#41;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>parseInt<span style="color: #66cc66;">&#40;</span>navigator.<span style="color: #006600;">appVersion</span><span style="color: #66cc66;">&#41;</span> &amp;gt;= <span style="color: #CC0000;">4</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> Win.<span style="color: #006600;">window</span>.<span style="color: #000066;">focus</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> popUpTextArea<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #009900; font-style: italic;">// สั่งสร้าง popup จากการกดปุ่มที่หน้าต่างหลัก</span>
popUpWindow<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'popup_textarea.html'</span>,<span style="color: #3366CC;">'SH1'</span>,<span style="color: #CC0000;">340</span>,<span style="color: #CC0000;">130</span>,<span style="color: #3366CC;">'no'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;</pre>
<p>ไฟล์ popup_textarea.html</p>
<pre class="javascript">&nbsp;
<span style="color: #009900; font-style: italic;">// เมื่อกดปุ่ม Set Value ที่ popup จะอ่านค่าจาก textarea มา</span>
<span style="color: #009900; font-style: italic;">// และแปลงจาก \n (ขึ้นบรรทัดใหม่) เป็น :</span>
<span style="color: #003366; font-weight: bold;">function</span> setContent <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> strContent = document.<span style="color: #006600;">frmSelect</span>.<span style="color: #006600;">tbTextArea</span>.<span style="color: #006600;">value</span>;
strContent = replaceString<span style="color: #66cc66;">&#40;</span>strContent,<span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span>,<span style="color: #3366CC;">':'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #009900; font-style: italic;">// window.opener ก็คือตัวที่เปิดมันขึ้นมานั่นเอง</span>
window.<span style="color: #006600;">opener</span>.<span style="color: #006600;">document</span>.<span style="color: #006600;">frmTest</span>.<span style="color: #006600;">tbTest</span>.<span style="color: #006600;">value</span>=strContent;
window.<span style="color: #000066;">close</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #009900; font-style: italic;">// เอาไว้ replace ข้อความใน string ตามต้องการ</span>
<span style="color: #003366; font-weight: bold;">function</span> replaceString <span style="color: #66cc66;">&#40;</span>strString,strFind,strReplace<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #66cc66;">&#40;</span>strString.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span>strFind<span style="color: #66cc66;">&#41;</span>&amp;gt;<span style="color: #CC0000;">-1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
intPosition= strString.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span>strFind<span style="color: #66cc66;">&#41;</span>;
strString = <span style="color: #3366CC;">''</span> + <span style="color: #66cc66;">&#40;</span>strString.<span style="color: #006600;">substring</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">0</span>, intPosition<span style="color: #66cc66;">&#41;</span> + strReplace +
strString.<span style="color: #006600;">substring</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>intPosition + strFind.<span style="color: #006600;">length</span><span style="color: #66cc66;">&#41;</span>, strString.<span style="color: #006600;">length</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span> strString;
<span style="color: #66cc66;">&#125;</span>
&nbsp;</pre>
<p>
ลองของจริงโดยการ <a href="http://sixhead.com/wp-content/uploads/file/javascript/javascript-popup-and-window-opener.zip">ดาวน์โหลดไฟล์ที่นี่</a></p>
<p>&nbsp;</p>
<p><map name='google_ad_map_9_f21c57aff87a446f'>
<area shape='rect' href='http://imageads.googleadservices.com/pagead/imgclick/9?pos=0' coords='1,2,367,28' />
<area shape='rect' href='http://services.google.com/feedback/abg' coords='384,10,453,23'/></map>
<img usemap='#google_ad_map_9_f21c57aff87a446f' border='0' src='http://imageads.googleadservices.com/pagead/ads?format=468x30_aff_img&amp;client=&amp;channel=&amp;output=png&amp;cuid=9&amp;url= http%3A%2F%2Fsixhead.com%2F2008%2F01%2F26%2Fjavascript-popup-and-window-opener%2F' /></p>]]></content:encoded>
			<wfw:commentRss>http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
