<script type="text/javascript">
<!--
var answer = prompt ("What is your name ?","");
alert ("Hello there, " + answer);
// -->
</script>
จาก code ข้างบนหากเขียน javascript prompt แบบธรรมดา ในปัจจุบันอาจจะต้องถูก block อย่างแน่นอน เนื่องด้วยปัจจุบัน Browser ต่างๆ ล้วนมีระบบรักษาความปลอดภัยอย่างเข้มงวดมากขึ้น ทำอย่างไรดี วันนี้มีทางแก้ไข
ผลลัพธ์ที่ได้จากการเขียน Javascript prompt แบบปกติ แล้วลอง run script นี้ทาง browser คือ
"This website is using a scripted window to ask you for information. If you trust this website, click here to allow scripted windows..."
ตัวอย่างโค้ด
code javascript
<script type="text/javascript">
// This is variable for storing callback function
var ae_cb = null;
// this is a simple function-shortcut
// to avoid using lengthy document.getElementById
function ae$(a) { return document.getElementById(a); }
// This is a main ae_prompt function
// it saves function callback
// and sets up dialog
function ae_prompt(cb, q, a) {
ae_cb = cb;
ae$('aep_t').innerHTML = document.domain + ' question:';
ae$('aep_prompt').innerHTML = q;
ae$('aep_text').value = a;
ae$('aep_ovrl').style.display = ae$('aep_ww').style.display = '';
ae$('aep_text').focus();
ae$('aep_text').select();
}
// This function is called when user presses OK(m=0) or Cancel(m=1) button
// in the dialog. You should not call this function directly.
function ae_clk(m) {
// hide dialog layers
ae$('aep_ovrl').style.display = ae$('aep_ww').style.display = 'none';
if (!m)
ae_cb(null); // user pressed cancel, call callback with null
else
ae_cb(ae$('aep_text').value); // user pressed OK
}
</script>
ต่อไปเป็นส่วนของ CSS เป็นการทำให้แสดง prompt เพื่อใส่ข้อมูล
<style type="text/css">
#aep_ovrl {
background-color: black;
-moz-opacity: 0.7; opacity: 0.7;
top: 0; left: 0; position: fixed;
width: 100%; height:100%; z-index: 99;
}
#aep_ww { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; text-align: center;}
#aep_win { margin: 20% auto 0 auto; width: 400px; text-align: left;}
#aep_w {background-color: white; padding: 3px; border: 1px solid black; background-color: #EEE;}
#aep_t {color: white; margin: 0 0 2px 3px; font-family: Arial, sans-serif; font-size: 10pt;}
#aep_text {width: 100%;}
#aep_w span {font-family: Arial, sans-serif; font-size: 10pt;}
#aep_w div {text-align: right; margin-top: 5px;}
</style>
<!-- IE specific code: -->
<!--[if lte IE 7]>
<style type="text/css">
#aep_ovrl {
position: absolute;
filter:alpha(opacity=70);
top: expression(eval(document.body.scrollTop));
width: expression(eval(document.body.clientWidth));
}
#aep_ww {
position: absolute;
top: expression(eval(document.body.scrollTop));
}
</style>
<![endif]-->
และสุดท้าย เป็นการเรียกใช้ ae_prompt ในส่วนของ HTML. ต้องใส่ให้อยู่ภายใจ tag <body>
สามารถนำไปประยุกต์ใช้ทั้งโค้ด php หรือ โค้ด html
<!-- ae_prompt HTML code -->
<div id="aep_ovrl" style="display: none;"> </div>
<div id="aep_ww" style="display: none;">
<div id="aep_win"><div id="aep_t"></div>
<div id="aep_w"><span id="aep_prompt"></span>
<br /><input type="text" id="aep_text" onKeyPress=
"if((event.keyCode==10)||(event.keyCode==13)) ae_clk(1); if (event.keyCode==27) ae_clk(0);">
"if((event.keyCode==10)||(event.keyCode==13)) ae_clk(1); if (event.keyCode==27) ae_clk(0);">
<br><div><input type="button" id="aep_ok" onclick="ae_clk(1);" value="OK">
<input type="button" id="aep_cancel" onclick="ae_clk(0);" value="Cancel">
</div></div>
</div>
</div>
<!-- ae_prompt HTML code -->
ส่วนอันนี้เป็นตัวอย่างการนำไปใช้งาน
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://www.anyexample.com/files/js/prompt2.html -->
<HTML><HEAD><TITLE>prompt test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-874">
<SCRIPT type=text/javascript>
function hw1()
{
ae_prompt( hw2, 'คุณชื่ออะไรครับ?', 'ผู้ไม่ประสงค์ออกนาม');
}
function hw2(n)
{
var hello = document.getElementById('hello');
hello.innerHTML = '<h1>สวัสดีครับ, คุณ' + n + '!</h1>';
}
// ae_prompt function sources
var ae_cb = null;
function ae$(a) { return document.getElementById(a); }
function ae_prompt(cb, q, a) {
ae_cb = cb;
ae$('aep_t').innerHTML = document.domain + ' คำถามวันนี้:';
ae$('aep_prompt').innerHTML = q;
ae$('aep_text').value = a;
ae$('aep_ovrl').style.display = ae$('aep_ww').style.display = '';
ae$('aep_text').focus();
ae$('aep_text').select();
}
function ae_clk(m) {
ae$('aep_ovrl').style.display = ae$('aep_ww').style.display = 'none';
if (!m) ae_cb(null); else ae_cb(ae$('aep_text').value);
}
// ae_prompt function sources
</SCRIPT>
<!-- CSS styles for ae_prompt function -->
<STYLE type=text/css>#aep_ovrl {
Z-INDEX: 99; LEFT: 0px; WIDTH: 100%; POSITION: fixed; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: black; -moz-opacity: 0.7; opacity: 0.7
}
#aep_ww {
Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: fixed; TOP: 0px; HEIGHT: 100%; TEXT-ALIGN: center
}
#aep_win {
MARGIN: 20% auto 0px; WIDTH: 400px; TEXT-ALIGN: left
}
#aep_w {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: black 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: black 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #eee
}
#aep_t {
FONT-SIZE: 10pt; MARGIN: 0px 0px 2px 3px; COLOR: white; FONT-FAMILY: Arial, sans-serif
}
#aep_text {
WIDTH: 100%
}
#aep_w SPAN {
FONT-SIZE: 10pt; FONT-FAMILY: Arial, sans-serif
}
#aep_w DIV {
MARGIN-TOP: 5px; TEXT-ALIGN: right
}
</STYLE>
<!-- IE specific code: --><!--[if lte IE 7]>
<STYLE type=text/css>#aep_ovrl {
FILTER: alpha(opacity=70); ; WIDTH: expression(eval(document.body.clientWidth)); POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop))
}
#aep_ww {
POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop))
}
</STYLE>
<![endif]--><!-- CSS styles for ae_prompt function -->
<META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff><!-- ae_prompt HTML code -->
<DIV id=aep_ovrl style="DISPLAY: none"></DIV>
<DIV id=aep_ww style="DISPLAY: none">
<DIV id=aep_win>
<DIV id=aep_t></DIV>
<DIV id=aep_w><SPAN id=aep_prompt></SPAN><BR><INPUT
onkeypress="if((event.keyCode==10)||(event.keyCode==13)) ae_clk(1); if (event.keyCode==27) ae_clk(0);"
id=aep_text><BR>
<DIV><INPUT id=aep_ok onclick=ae_clk(1); type=button value=OK> <INPUT id=aep_cancel onclick=ae_clk(0); type=button value=Cancel>
</DIV></DIV></DIV></DIV><!-- ae_prompt HTML code -->
<DIV id=hello>สวัสดี! <SPAN
style="CURSOR: pointer; COLOR: blue; TEXT-DECORATION: underline"
onclick=hw1();>คลิกที่นี่</SPAN> เพื่อใส่ชื่อของคุณ. </DIV></BODY></HTML>
