title: How to force an iframe size programmatically?
body: <p>I'm making a page builder type thing. For normal view the iframe needs to resize accordingly, but for mobile / tablet views it needs to be a set size.</p>
  
  <p>using iframe-resizer <a href="https://github.com/davidjbradshaw/iframe-resizer" rel="nofollow noreferrer">https://github.com/davidjbradshaw/iframe-resizer</a> by @david-bradshaw</p>
  
  <p>parent window:</p>
  
  <pre><code>&lt;script type="text/javascript" src="javascript/iframeResizer.min.js"&gt;&lt;/script&gt;
  ....
  $("iframe")[0].iFrameResize({
      checkOrigin: false,
      enablePublicMethods     : true,
      heightCalculationMethod: "bodyScroll",
  });
  ....
  </code></pre>
  
  <p>The viewpoint size changer does this :</p>
  
  <pre><code>// set the iframes width and height "before" iframeresizer does stuff to make it look seemless    
  _this.editor.css({
      "width":mapper[size].width,
      "height":mapper[size].height
  })
  </code></pre>
  
  <p>Only way I saw the .size() working is from the iframe itself</p>
  
  <pre><code>// fire off a sendMessage cause only way i saw .size() working is from the iframe itself
  _this.editor[0].iFrameResizer.sendMessage({
      "width":mapper[size].width,
      "height":mapper[size].height,
      "forceSize":true
  });
  </code></pre>
  
  <p>iframe window</p>
  
  <pre><code>&lt;script&gt;
      var iFrameResizer = {
          messageCallback: function(message){
              console.log("messageCallback")
              console.log(message)
              if (message.forceSize==true){
                  console.log(window.parentIFrame)
                  window.parentIFrame.autoResize(false);
                  window.parentIFrame.size(message.height); // Set height to 100px
              } else {
                  // apply auto resizing again
              }
  
          }
      }
  &lt;/script&gt;
  &lt;script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I was hoping for an easier way like on parent disableIframeResizer() or something, or being able to set .size() from parent since that's where the choose your viewpoint parts live.I  can't seem to figure it out :( </p>
  
  <p>My issue is: I need to somehow tell the iframe not to do its resizing when forceSize = true and then when the message comes in then to resize accordingly .</p>
  
  <p>Thanks for a pretty decent library tho!</p>