0

我在 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

返回 150 像素

这个

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
4

1 回答 1

1

我只是使用了一个用于移动设备的 javascript 包含来处理设置页面高度。您可以包含 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");
    }
  });
于 2012-10-16T19:45:12.570 回答