Question

I have an iframe inside a haml view. I just want to resize it depending on the heigh of its content.

At the top of index.html.haml I have:

:javascript
   $(document).ready(function(){
      document.getElementById('doc').style.height =     
      document.getElementById('doc').contentWindow.document.body.scrollHeight + "px";
   })

%iframe{id: "doc", src: "https://docs.google.com/document/d/10Kc15lbqAcbIgkN5SsqZCXTIY2UZvbDS1DrwhzOdT1Y/edit", align: "middle"}

When the page loads, i have the following errors:

Viewport argument key "minimum-scale:1.0" not recognized and ignored. 
Viewport argument key "maximum-scale:1.0" not recognized and ignored. 

This

document.getElementById('doc').style.height

returns 150px

This

document.getElementById('doc').contentWindow.document.body.scrollHeight + "px"

returns

Unnsafe JavaScript attempt to access frame with URL https://docs.google.com/document/d/10Kc15lbqAcbIgkN5SsqZCXTIY2UZvbDS1DrwhzOdT1Y/edit from frame with URL http://localhost:3000/projects/1/specifications/4. Domains, protocols and ports must match.
TypeError: Cannot read property 'body' of undefined

Answer 1

I just used a javascript include for mobile to deal with setting the page height. You can include the js/css for changing height based on landscape/portrait view

  :javascript
  var viewport = $('meta[name=viewport]').attr("your selector");
  $(window).bind( 'orientationchange', function(e){
    if ($.event.special.orientationchange.orientation() == "portrait") {
      $(this).setAttribute("your selector", "height=device-height, initial-scale=1.0");
    } else {
      //Do Whatever in landscape mode
      $(this).setAttribute("your selector", "width=device-width, initial-scale=1.0, maximum-scale=1.0");
    }
  });