How to dynamically change size of the new window?

Question

I have a JS file connected with my JSP file. I want to show new window with a photo, every time I hit the link. So far everything is okay, new window appears, but it has strictly specified width and height.

else if (nameClass == "label3"){
  var myWindow = window.open("", "MsgWindow", "width=1600, height=1000");
  myWindow.document.write("<img src='images/images/szafa.png'>");
}

How can I change that to have a dynamically changed size of the window, depends of the image size?

see if [this](https://stackoverflow.com/questions/6980772/jquery-resize-window-to-fit-contents) helps — Muhammad Usman, Aug 01 '19 at 06:54
My browser is set to always open full new tabs instead of popups, and not allow any size manipulation – so don’t expect this to work “everywhere” to begin with. _“I want to show new window with a photo, every time I hit the link.”_ - a _lightbox_ solution might be the better alternative for something like this to begin with maybe? — misorude, Aug 01 '19 at 07:19

score 0 · Answer 1 · answered Aug 01 '19 at 07:03

I have not tested this code but you will get the idea:

var myWindow = window.open("", "MsgWindow", "width=100, height=100, resizable=1, scrollbars=1, menubar=1");
myWindow.document.write(
'<script language="Javascript" type="text/javascript">' +
'function getElById(idVal)' +
'{' +
'  if (document.getElementById != null)' +
'    return document.getElementById(idVal)' +
'  if (document.all != null)' +
'    return document.all[idVal]' +
'  alert("Problem getting element by id")' +
'  return null' +
'}' +
'function resizer()' +
'{' +
'   var elem = getElById("pic");' +
'   if(elem)' +
'   {' +
'       var oH = elem.clip ? elem.clip.height : elem.offsetHeight;' +
'       var oW = elem.clip ? elem.clip.width : elem.offsetWidth;' +
'       window.resizeTo( oW, oH );' +
'       var myW = 0, myH = 0, d = window.document.documentElement, b = window.document.body;' +
'       if( window.innerWidth ) ' +
'       { ' +
'           myW = window.innerWidth; ' +
'           myH = window.innerHeight; ' +
'       }' +
'       else if( d && d.clientWidth ) ' +
'       { ' +
'           myW = d.clientWidth; ' +
'           myH = d.clientHeight; ' +
'       }' +
'       else if( b && b.clientWidth ) ' +
'       { ' +
'           myW = b.clientWidth; ' +
'           myH = b.clientHeight; ' +
'       }' +
'       window.resizeTo(6+ oW + ( oW - myW ),6+ oH + ( oH - myH ) );' +
'   }' +
'}' +
'</script>'
);
myWindow.document.write("<img id='pic' src='images/images/szafa.png'>");
myWindow.document.body.onLoad='resizer';

Or you can prepare a PHP script which will output the above HTML and provide the image name as URL query parameter to the script.

How to dynamically change size of the new window?

1 Answers1