prototype window class

This javascript class allows you to add window in a HTML page.

입니다. 다시말해 javascript framework로 잘 알려져 있는 prototype.js 기반의 HTML page에 window 화면을 그려주는 javascript library입니다.

저도 1up님을 통해서 알게 되었는데요. 좋네요. +_+

제가 설명을 하는 것보다 sample page에서 직접 구경하시는 것이 이해가 더 빠르실 것 같습니다. ^^


다만 불편한 점이라고 해야할까요. 버그라고 해야할까요. IE에서는 동적으로 불러오는 window page에 존재하는 javascript가 실행이 되지 않습니다.

음.. 설명이 좀 이상한데요.

sample page의 8. Ajax Dialog를 보면 Ajax.Request를 이용하여 info_panel.html를 불러오는데요. info_panel.html에는 없지만 이 곳에 javascript가 있을 경우 해당 javascript가 실행이 되지 않는다는 것입니다.


간단한 예제 코드를 만들어 보겠습니다.

// file : bug.html

  1. <html>
    <head>
    <title>Prototype window test page</title>
    <script type="text/javascript" src="http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
    <script type="text/javascript" src="http://eggnara.com/dev/sample/prototype-window-library/1.3/window.js"></script>
    <script type="text/javascript">
    function openConfirm() {
         Dialog.confirm({url: "alert.html", options: {method: 'get'}},
            {top: 10, width:250, okLabel: "Yes", cancelLabel:"No"})  

    }
    </script>
    <link href="themes/default.css" rel="stylesheet" type="text/css"/>
    <link href="themes/alert.css" rel="stylesheet" type="text/css"/>
    <link href="themes/alphacube.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <a href="#" onclick="openConfirm()">openConfirm</a>
    </body>
    </html>

이며 실제 Ajax Request를 이용하여 불러올 alert.html의 내용은

// file : alert.html

  1. <p>
    alert('javascript library');
    </p>
    <script type="text/javascript">
    alert('javascript library');
    </script>

입니다.

실제 bug.html를 실행하여 openCofirm을 클릭하면 FF에서는 'javascript library' 메시지의 alert창을 보여주는 반면 IE에서는 아무런 반응이 없이 prototype window에서 제공하는 alert window만을 보여줍니다.


원인은 window.js 파일의 1521 line을 보면 (1.3 버전 기준)

  1. _openDialog: function(content, parameters) {
  2. // ...
  3.   var win = new Window(parameters);
     win.getContent().innerHTML = content;   // 1521 line
    // ...

라고 되어있는데요.

  1. win.getContent().innerHTML = content;

  1. win.getContent().update(content);

로 수정하시면 IE에서도 정상적으로 'javascrip library' 라는 alert 메시지를 볼 수 있습니다.

샘플 페이지 : bugfix.html


아마도 innerHTML 에 새로운 html을 설정할 경우 IE와 FF이 각각 다르게 작동하는 것 같습니다. 다시 말해 FF은 새로운 html에 있는 javascript 까지 실행이 되는 반면 IE에서는 단순히 html만을 설정하는 것으로 보입니다.


여하튼 이러한 일로 삽질하는 일이 없어야겠습니다. ^^

ps. 이 포스팅을 빌어 삽질하게 해주신 1up님께 감사의 표시를...+_+