Resize external website content to fit iFrame width

Question

I have a webpage with 2 iFrames in it  Both of them are with fixed width and height  I am loading external websites inside them  How can I resize those external websites width to fit with the iFrame  like mobile browsers does by changing viewport

User · Accepted Answer

What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.

E.g.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

User · Answer

Tip for 1 website resizing the height  But you can change to 2 websites   Here is my code to resize an iframe with an external website  You need insert a code into the parent  with iframe code  page and in the external website as well  so  this won t work with you don t have access to edit the external website    local  iframe  page  just insert a code snippet remote  external  page  you need a  body onload  and a  div  that holds all contents  And body needs to be styled to  margin 0    Local    lt IFRAME STYLE  width 100  height 1px  SRC  http   www remote-site com   FRAMEBORDER  no  BORDER  0  SCROLLING  no  ID  estframe  gt  lt  IFRAME gt    lt SCRIPT gt  var eventMethod   window addEventListener    addEventListener     attachEvent   var eventer   window eventMethod   var messageEvent   eventMethod     attachEvent     onmessage     message   eventer messageEvent function e      if  e data substring 0 3    frm   document getElementById  estframe   style height   e data substring 3     px     false    lt  SCRIPT gt    You need this  frm  prefix to avoid problems with other embeded codes like Twitter or Facebook plugins  If you have a plain page  you can remove the  if  and the  frm  prefix on both pages  script and onload    Remote   You need jQuery to accomplish about  real  page height  I cannot realize how to do with pure JavaScript since you ll have problem when resize the height down  higher to lower height  using body scrollHeight or related  For some reason  it will return always the biggest height  pre-redimensioned     lt BODY onload  parent postMessage  frm      master   height         STYLE  margin 0  gt   lt SCRIPT SRC  path-to-jquery jquery min js  gt  lt  SCRIPT gt   lt DIV ID  master  gt  your content  lt  DIV gt    So  parent page  iframe  has a 1px default height  The script inserts a  wait for message event  from the iframe  When a message  post message  is received and the first 3 chars are  frm   to avoid the mentioned problem   will get the number from 4th position and set the iframe height  style   including  px  unit   The external site  loaded in the iframe  will  send a message  to the parent  opener  with the  frm  and the height of the main div  in this case id  master    The     in postmessage means  any source    Hope this helps  Sorry for my english

[javascript] Resize external website content to fit iFrame width

Examples related to javascript

Examples related to html

Examples related to css

Examples related to iframe

Examples related to web