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
- <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
- <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 버전 기준)
- _openDialog: function(content, parameters) {
- // ...
- var win = new Window(parameters);
win.getContent().innerHTML = content; // 1521 line
// ...
라고 되어있는데요.
- win.getContent().innerHTML = content;
을
- win.getContent().update(content);
로 수정하시면 IE에서도 정상적으로 'javascrip library' 라는 alert 메시지를 볼 수 있습니다.
샘플 페이지 : bugfix.html
아마도 innerHTML 에 새로운 html을 설정할 경우 IE와 FF이 각각 다르게 작동하는 것 같습니다. 다시 말해 FF은 새로운 html에 있는 javascript 까지 실행이 되는 반면 IE에서는 단순히 html만을 설정하는 것으로 보입니다.
여하튼 이러한 일로 삽질하는 일이 없어야겠습니다. ^^
ps. 이 포스팅을 빌어 삽질하게 해주신 1up님께 감사의 표시를...+_+