'popup'에 해당되는 글 3건

  1. 2010.05.12 Popup Window auto resize v1.0.0
  2. 2010.05.07 팝업 차단 alert 띄우기.
  3. 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>
*/
:

팝업 차단 alert 띄우기.

ITWeb/개발일반 2010. 5. 7. 20:31
내용에 오류가 있어서 수정 합니다.
크롬이 좀 문제가 있더군요.
크롬의 경우 팝업창을 차단 하기는 하지만 내부적으로 차단된 팝업창이 모두 로딩 된 상태로 유지 되기 때문에 모든 요소에 접근이 가능 하더군요.
왜 이렇게 만들었는지 짧은 생각으로는 사실 좀 이해가 안가긴 합니다.

var objWin = window.open(URL, WINDOWNAME, OPTIONS);
 
 if ( navigator.userAgent.indexOf("Chrome") > -1 ) {
   // chrome 의 경우 최초 한번은 감지가 가능 하나 두번째 부터는 이미 팝업창이 로딩된 상태이기 때문에 감지가 안됩니다.
 } else {
  // FF, IE, Safari, Opera 감지 가능
  if( typeof(win) == "undefined" || win == null || typeof(win.name) == "undefined"){
   alert("팝업 차단됨");
  }
 }

Chrome 의 경우 팝업차단 감지를 완벽하게 하는 방법을 아시는 분은 정보 공유 좀 부탁 드려요.. ^^;

Tip.
팝업차단은 사용자에 의한 1차 클릭과 액션에 의한건 모두 허용 됩니다.
다만 사용자의 1차 액션이후에 자동으로 발생 하게 되는 액션에 대해서는 모두 차단 됩니다.
역시 사용자의 액션이 아닌 자동으로 발생 하게 되는 액션에 대해서도 모두 차단 됩니다.
 


window.open 을 사용 하다 보면.. popup block 으로 정상적인 실행이 안될 때가 있죠..
이런 경우 popup block 에 예외 항목 등록을 해 달라는 alert 을 띄워 주면 단편적인 방법으로는 해결을 할 수 있을 듯 합니다.

각 브라우저 별로 popup block 방법이 좀 다릅니다.
아래 조건절 순서에 맞게 등록 하시면 거의 대부분 브라우저에서 alert 메시지를 띄울 수 있습니다.

테스트 브라우저 : IE, FF, CHROME, SAFARI, OPERA

var objWin = window.open(URL, WINDOWNAME, OPTIONS);

if ( typeof(objWin) == "undefined" ||
    objWin == null ||
    typeof(objWin.name) == "undefined" ||
    typeof(objWin.document.READATTR) == "undefined" ) {
    alert("팝업이 차단 되었습니다. \n ABCD.COM을 등록해 주세요.");
}

여기서 typeof(objWin.document.READATTR) 이 부분은 chrome 때문에 들어간 부분 입니다.
실제 chrome 에서는 objWin 이 object로, objWin.name 이 string 으로 objWin.document 가 object 로 return 해줍니다.
즉 window 객체는 가지고 있으나 실제 페이지 로딩은 되지 않았기 때문에 해당 페이지내 elements 나 attributes 를 read 하면 undefined 로 떨어집니다.
꼭 이렇게 해야 하는건 아니지만 이런 식으로 하면 된다 정도로 이해 하시면 될 것 같내요.. ㅎㅎ

위 코드는 팝업차단이 설정된 경우에만 테스트 된 코드 입니다.
팝업 차단이 해제된 경우에는 아직 테스트를 못한 코드이니 ㅎㅎ 감안하셔서 보세요.
:

window.open ...

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

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

참고 URL : https://developer.mozilla.org/En/DOM/Window.open
OS+Browser 별 테스트 하다 이건 이렇고 저건 저렇고 고민 고민 하지마.. ㅋ
이 노무 crossbrowsing.. ㅋㅋ
저작자표시 비영리 동일조건
:
◀ PREV : [1] : NEXT ▶

티스토리툴바