บทความ > Javascript

แก้ปัญหา window.showModalDialog is not a function Turn Back

เมื่อ 2016-09-06 12:09:07

Uncaught TypeError: window.showModalDialog is not a function

เป็นเพราะ Chrome ในเวอชั่นใหม่ๆ ได้เลิก support function นี้ ดังนั้น เราจึงต้องปรับเปลี่ยนวิธีการเปิด popup ใหม่

showModalDialog มีข้อดีคือ มันสามารถส่งตัวแปรไปรับค่าจาก popup แล้ว return มาใช้ได้เลย

แต่เมื่อ function นี้มันใช้ไม่ได้  เราจึงต้องหาฟังชั่นอื่นทดแทน

ผมเลือกใช้วิธีบ้านๆ ง่ายๆ นั่นคือ  window.open เป็นพระเอกของเราในงานนี้ครับ

window.showModalDialog is not a function

จากเดิมนะครับ

function returnValue(){
    var val1;
    var val2;
}

function openPopup(){
    newWindow = 'popup.html;

    if(window.showModalDialog( newWindow ,returnVal ,"dialogHeight:380px;dialogWidth:400px;center")==true){

         somthing with returnVal;

           alert(returnVal.val1);
           alert(returnVal.val2);

    }

}

 

ส่วน function ที่นำมาใช้แทนตัวเดิมเป็นแบบนี้ครับ

 

<script>

function openPopup() {
    newWindow = 'popup.html;
    window.open(newWindow,'','Left=100,Top=100,width=400,height=380') ;
}

</script>

<div id="result"></div>

 

แต่ฟังชั่นนี้ จะไม่ได้คืนค่ามายัง window ที่เป็น parent นะครับ  ดังนั้นเราจะต้องให้ window ที่ popup ส่งค่ากลับมายัง parent

ผมเลือกใช้ jquery เพราะงานและรวดเร็วต่อการเรียกใช้งาน function ครับ

ส่วน method option ต่างๆ ของ window.open นั้น ศึกษาเพิ่มได้จากอาจารย์ของผมเลย http://www.w3schools.com/jsref/met_win_open.asp

มาดูการคืนค่าจาก popup.html กันต่อครับ

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script>
function sendData(){
     Title = $('input[name=title]').val();
     Desc = $('input[name=desc]').val();

     // return ไปที่่ div #result

     $('#result',opener.document).empty().text( Title + ":" + Desc );

     window.close();   // ปิด popup
}
</script>
</head>
<body>

<form>
      <input type="text" name="title" />
      <input type="text" name="desc" />
      <button onclick="sendData()">OK</button>
</form>

</body>
</html>

 

ในปัจจุบัน ยังจะมี js framework สำเร็จรูปให้ใช้อย่าง modal ให้เลือกใช้อย่างหลากหลาย  ก็แล้วแต่ความสะดวกของแต่ละท่านนะครับ

ขอให้สนุกกับการเขียนดปรแกรม 
ขอบคุณครับ

Turn Back

Automotive ดูทั้งหมด

IT Update ดูทั้งหมด