微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

正常的jQuery技术如$(window).width()和$(document).width()返回对话框的宽度,这不是我想要的(并且对于这种环境是唯一的).

试图引用对话框外的任何div容器都会返回null(我已经尝试过“#docs-editor-container”,“modal-dialog-bg”和其他几个.)

这是一个简单的脚本,用我到目前为止的结果重新创建这个对话框.

Code.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>

解决方法

您可以尝试使用CSS样式在Width = 100%和Height = 0%上获得屏幕开发的大小.然后使用document.getElementById(“container”).offsetHeight

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

这是一个例子(https://script.google.com/d/10kzZ1DiTsere_BdjLEnIJcZaOHVCfcGF56DED6fMLY2PfY9g–h1Efrr/edit?usp=sharing):

code.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>

在此示例中,您可以删除注释(/ * * /)并尝试获取Heigth大小.

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐