如何确定 Google 表格窗口大小

Question

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

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

尝试引用对话框外的任何 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;
}

Dialog.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 中的说明访问它。

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

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

Answer 2

您可以尝试使用宽度=100% 和高度=0% 的 CSS 样式来获取屏幕大小的 DIV。然后使用 document.getElementById("container").offsetHeight

问题是您只能在 SandBox EMULATE 模式 (HtmlService.SandboxMode.EMULATED) 上使用它。

这里是一个例子（https://script.google.com/d/10kzZ1DiTsere_BdjLEnIJcZaOHVCfcGF56DED6fMLY2PfY9g--h1Efrr/edit?usp=sharing）：

代码.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.EMULATED);
}

index.html

<style>
  #container{
    width: 100%;
/*    height: 100%; */
    background-color: #ccccff;
  }
</style>
<div id="container">
</div>
<script>
  alert(document.getElementById("container").offsetWidth);
/*  alert(document.getElementById("container").offsetHeight); */
</script>

在本例中，您可以删除 cmets (/* */) 并尝试获取 Heigth 大小。

要西班牙语和完整版本，请查看https://sites.google.com/site/appsscriptenespanol/obtener-tamano-maximo-de-pantalla-en-apps-script-usando-htmlservice