谷歌文件選擇器對話框沒有 iframe

Question

我正在嘗試在我的 Google Apps 腳本中設置一個文件選擇器來上傳報告。 我已經使用谷歌在這里提供的教程運行它，但我想知道是否有辦法啟動文件選擇器作為它自己的對話框？ 提供的代碼將它作為另一個模態對話框中的 iframe，我並不喜歡它的外觀。 我在下面提供了我的腳本和 html 文件的副本：

氣體代碼：

function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('PickerHTML2.html')
      .setWidth(600)
      .setHeight(425)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select a file');
}

function getOAuthToken() {
  DriveApp.getRootFolder();
  return ScriptApp.getOAuthToken();
}

HTML代碼：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
  <script>
    // IMPORTANT: Replace the value for DEVELOPER_KEY with the API key obtained
    // from the Google Developers Console.
    var DEVELOPER_KEY = 'AIzaSyA5H6SiBu7r7OcZb1qEzgL6m-3YI6vYEeg';
    var DIALOG_DIMENSIONS = {width: 600, height: 425};
    var pickerApiLoaded = false;

    function onApiLoad() {
      gapi.load('picker', {'callback': function() {
        pickerApiLoaded = true;
      }});
     }

    function getOAuthToken() {
      google.script.run.withSuccessHandler(createPicker)
          .withFailureHandler(showError).getOAuthToken();
    }

    function createPicker(token) {
      var uploadView = new google.picker.DocsUploadView().setIncludeFolders(true);
      if (pickerApiLoaded && token) {
        var picker = new google.picker.PickerBuilder()
            // Instruct Picker to display only spreadsheets in Drive. For other
            // views, see https://developers.google.com/picker/docs/#otherviews
            .addView(uploadView)
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .hideTitleBar()
            .setOAuthToken(token)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setOrigin(google.script.host.origin)
            .setSize(DIALOG_DIMENSIONS.width - 2,DIALOG_DIMENSIONS.height - 2)
            .build();
        picker.setVisible(true);
      } else {
        showError('Unable to load the file picker.');
      }
    }

    function pickerCallback(data) {
      var action = data[google.picker.Response.ACTION];
      if (action == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        var id = doc[google.picker.Document.ID];
        var url = doc[google.picker.Document.URL];
        var title = doc[google.picker.Document.NAME];
        document.getElementById('result').innerHTML =
            '<b>You chose:</b><br>Name: <a href="' + url + '">' + title +
            '</a><br>ID: ' + id;
      } else if (action == google.picker.Action.CANCEL) {
        document.getElementById('result').innerHTML = 'Picker canceled.';
      }
    }

    function showError(message) {
      document.getElementById('result').innerHTML = 'Error: ' + message;
    }
  </script>
</head>
<body>
  <div>
    <button onclick='getOAuthToken()'>Select a file</button>
    <p id='result'></p>
  </div>
  <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
</html>

下面是它目前的樣子。 同樣，我不喜歡帶有滾動條的 iframe 生成。 所以我正在尋找一種方法，讓它顯示在它自己的對話框中，或者我猜沒有滾動條。

Answer 1

將您自己的自定義對話框發布為WebApp

由於您的實現是一個附加組件，您可以通過單擊附加組件側欄中的按鈕來打開 WebApp 對話框。

樣本：

 <button id="portal" onclick="window.open('https://script.google.com/macros/s/XXX/exec', '_blank')" id="myButton" >open Picker in a custom WebApp dialog</button>

其中https://script.google.com/macros/s/XXX/exec是您的 WebApp 的部署 URL。

對於 WebApp 本身，替換

function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('PickerHTML2.html')
      .setWidth(600)
      .setHeight(425)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select a file');
}

通過

function doGet() {
   var html = HtmlService.createTemplateFromFile('PickerHTML2.html')
   return html.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

並將代碼部署為 WebApp。

谷歌文件選擇器對話框沒有 iframe

問題描述

1 個解決方案

解決方案1
0 已采納 2021-10-15 07:53:37

將您自己的自定義對話框發布為WebApp

谷歌文件選擇器對話框沒有 iframe

問題描述

1 個解決方案

解決方案1 0 已采納 2021-10-15 07:53:37

將您自己的自定義對話框發布為WebApp

解決方案1
0 已采納 2021-10-15 07:53:37