jquery - 如何确定 Google 表格窗口大小

Question

在从包含 Google Sheet 的脚本启动的模态对话框中，是否有某种方法可以确定浏览器窗口或主机显示器的大小？我希望能够将对话框的宽度设置为用户显示的百分比，以便支持各种机器。

普通的 jQuery 技术，如 $( window ).width() 和 $( document ).width() 返回对话框的宽度，这不是我想要的(并且是该​​环境所独有的)。

尝试引用对话框之外的任何 div 容器都会返回 null (我已经尝试过 "#docs-editor-container", "modal-dialog-bg"，以及其他一些。)

这是一个简单的脚本，可以使用我迄今为止得到的结果重新创建此对话框。

代码.gs

function openDialog() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Dialog')
     .setWidth(500)
     .setHeight(400);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'How wide is the screen?');
  return;
}

对话框.html

<div id="outer" style="padding:1;"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(function() {
    reportSizeOf( 'window',$(window) );                   // 500 - expected
    reportSizeOf( 'document',$(document) );                 // 500 - same as window
    reportSizeOf( '#docs-editor-container',$('#docs-editor-container'));  // null
    reportSizeOf( 'modal-dialog-bg',$('modal-dialog-bg'));         // null
  });

  function reportSizeOf( elname, element ) {
    $('#outer').append('<br>Width of "' + elname + '": ' + element.width());
  }
</script>

Answer 1

如果附加 iframe 来源相同，我们可以通过以下方式跳出 2 个 iframe:

parent.parent.document.body.clientHeight

按照 this post 中所述访问它.

既然不是，文档可能需要增强请求，以通过 postmessage 将最大尺寸传递到附加 iframe 上或其他一些跨域机制。向现有的 Browser 类添加 maxHeight 和宽度可能更直接，但认为它只是为了添加浏览器类型的小部件而设计的。

设置大于所需的宽度确实会回退到文档窗口的最大宽度，但会导致用户无法看到关闭按钮，迫使他们按 esc。如果您想要 90% 的文档最大高度/宽度 View ，目前似乎不可能。