Question

我在haml视图中有一个iframe。我只想根据其内容的高度调整大小。

在index.html.haml的顶部，我有：

: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"}

页面加载时，我有以下错误：

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

此

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

返回150px

此

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

返回

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

我刚刚使用javascript include for mobile来处理设置页面高度。您可以根据横向/纵向视图包含用于更改高度的js / css

  :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");
    }
  });

视口参数键“最大比例：1.0”无法识别和忽略

1 个答案: