'팝업창'에 해당되는 글 2건

  1. 2010.05.12 Popup Window auto resize v1.0.0
  2. 2008.12.02 window.open ...

Popup Window auto resize v1.0.0

ITWeb/개발일반 2010. 5. 12. 10:23

팝업창을 띄우거나 페이지내 동적인 iframe 을 삽입 하다 보면 창 크기를 조절 해야 할 때가 있지요.
팝업창의 경우
window.resizeTo 나 resizeBy 로 조절 하는데 resizeTo 는 브라우저간 표현 방식이 조금씩 달라서 사용하기 지랄 입니다.
resizeBy 의 경우 상대적인 크기로 작거나 크거나 했을 경우 그 차이만큼 조절이 가능 하니 어지간 하면 다 적용 됩니다.


frame 의 경우
쉽게 보면.. wysiwyg 에디터의 경우 frame 컨트롤을 하잖아요... 그걸 활용해서 조절 하면 됩니다.
아래 코드 중 IE 에서는 scrollHeight 를 사용하고 있고 그 이외에서는 body 에.. div 를 하나 삽입 한 후 offsetTop 으로 사용하고 있죠.
이유는.. scrollHeight 는 body 의 컨텐츠가 찾이 하는 높이가 되고.. offsetTop 은.. offsetParent 노드의 top 에서 삽입된 div 객체까지의 상대적인 거리가 되니까.. 동적으로 높이 조절이 가능하게 됩니다.

Ref. https://developer.mozilla.org/en/DOM/element.offsetTop
Ref. https://developer.mozilla.org/en/DOM/element.scrollHeight



/*
 * IFrame & Popup Window Resize Control Module
 *
 * @package
 * @path
 * @filename    resize.js
 * @author      
 * @date        2010/05/11
 *
 * Change History
 * Date         Engineer                Type        Description
 * ----------   ------------------      ---------   --------------------
 * 2010/05/11   Henry Jeong      Create      Initial Create
 */
/*
 *
 * IFrame & Popup Window Resize module object
 *
 */
var JResize = function () {};
/*
 * @param
 *    iframeid : frame id to resize
 *    popupid : popup window id to resize
 *    minHeight : resize minimize
 *    width : popup window option
 *    heigh : popup window optiont
 */
JResize.prototype.vars = {
 iframeid:"",
 popupid:"",
 minHeight:0,
 width:0,
 height:0
}
JResize.prototype.setIframeId = function (v) {
 JResize.vars.iframeid = v;
}
JResize.prototype.setPopupId = function (v) {
 JResize.vars.popupid = v;
}
JResize.prototype.setMinHeight = function (v) {
 JResize.vars.minHeight = v;
}
/*
 * iframe auto resize
 * must window.onload = JResize.setIframe;
 */
JResize.prototype.setIframe = function () {
 var iframeid = JResize.vars.iframeid;
 var iframeObj = document.getElementById(iframeid);
 var minHeight = JResize.vars.minHeight;
 var h;
 try {
  var doc = iframeObj.contentDocument || iframeObj.contentWindow.document;
  
  if (doc.location.href == 'about:blank') {
   iframeObj.style.height = minHeight+'px';
   return;
  }
  if ( /MSIE/.test(navigator.userAgent) ) {
   h = doc.body.scrollHeight;
  } else {
   var divObj = doc.body.appendChild(document.createElement('DIV'))
   h = divObj.offsetTop;
   divObj.style.clear = 'both';
   divObj.parentNode.removeChild(divObj);
  }
  if (h < minHeight) h = minHeight;
  iframeObj.style.height = h + 'px';
  setTimeout( function () {
   JResize.setIframe();
  }, 200);
 } catch (e) {
  setTimeout( function () {
   JResize.setIframe();
  }, 200);
 }
}
/*
 * popup auto resize
 */
JResize.prototype.setPopup = function () {
 var ua = navigator.userAgent;
 var w = JResize.vars.width;
 var h = JResize.vars.height;
 document.body.style.overflow='hidden';
 if ( /MSIE/.test(navigator.userAgent) ) {
  window.resizeBy(w-document.documentElement.clientWidth, h-document.documentElement.clientHeight);
 } else {
  window.resizeBy(w-window.innerWidth, h-window.innerHeight);
 }
}
JResize = new JResize();
/*
// this is frame sample code.
<iframe id="commentlist" name="commentlist" src="./frame.html" width="906" height="100"  frameborder="1" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<script language="javascript">
<!--
JResize.vars.iframeid = "commentlist";
JResize.vars.minHeight = "200";
window.onload = JResize.setIframe;
//-->
</script>
// this is popup sample code.
<script type="text/javascript">
<!--
JResize.vars.width = 400;
JResize.vars.height = 246;
window.onload = JResize.setPopup;
//-->
</script>
*/
:

window.open ...

ITWeb/개발일반 2008. 12. 2. 17:42

요즘 웹표준화 관련해서.. widow.open 으로 띄운 팝업창에 대해서 하도 의견들이 많아.. 기냥 MDC 에 있는 이미지 하나 퍼 나릅니다..

참고 URL : https://developer.mozilla.org/En/DOM/Window.open
OS+Browser 별 테스트 하다 이건 이렇고 저건 저렇고 고민 고민 하지마.. ㅋ
이 노무 crossbrowsing.. ㅋㅋ
: