Migracja do trybu piaskownicy IFRAME

Apps Script korzysta z bezpiecznej piaskownicy, aby zapewnić izolację ochronną Google Workspaceaplikacji w określonych sytuacjach. Wszystkie tryby piaskownicy zostały wyłączone z wyjątkiem IFRAME. Aplikacje korzystające ze starszych trybów piaskownicy automatycznie używają teraz nowszego trybu IFRAME.

W przypadku aplikacji, które wcześniej używały tych starszych trybów w usłudze HTML, konieczne może być wprowadzenie zmian w trybie IFRAME ze względu na te różnice:

  • Musisz teraz zastąpić atrybut target linku za pomocą target="_top" lub target="_blank".
  • Pliki HTML udostępniane przez usługę HTML muszą zawierać tagi <!DOCTYPE html>, <html> i <body>
  • Natywna biblioteka wczytywania Google api.js nie wczytuje się automatycznie w trybie IFRAME
  • Wybierz – użytkownicy muszą wywołać setOrigin(), ponieważ treści są wyświetlane z nowej domeny
  • Niektóre starsze przeglądarki, w tym IE9, nie są obsługiwane.
  • Zaimportowane zasoby muszą teraz używać protokołu HTTPS
  • Przesyłanie formularzy nie jest już domyślnie zablokowane

Różnice te opisujemy w dalszej części tego artykułu.

W trybie IFRAME ustaw atrybut docelowy linku na _top lub _blank:

Code.js

function doGet() {
  var template = HtmlService.createTemplateFromFile('top');
  return template.evaluate();
}

top.html

<!DOCTYPE html>
<html>
 <body>
   <div>
     <a href="http://google.com" target="_top">Click Me!</a>
   </div>
 </body>
</html>

Ten atrybut możesz też zastąpić, używając tagu <base> w sekcji nagłówka strony głównej:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <div>
     <a href="http://google.com">Click Me!</a>
   </div>
 </body>
</html>

Tagi HTML najwyższego poziomu

W trybie piaskownicy NATIVE (i EMULATED) niektóre tagi HTML byłyby automatycznie dodawane do pliku Apps Script .html, ale nie dzieje się tak w trybie IFRAME.

Aby mieć pewność, że strony projektu będą prawidłowo wyświetlane za pomocą IFRAME, umieść zawartość strony w tych tagach najwyższego poziomu:

<!DOCTYPE html>
<html>
  <body>
    <!-- Add your HTML content here -->
  </body>
</html>

Biblioteka natywnego wczytywania JavaScript musi być jawnie wczytana

Skrypty, które korzystały z automatycznego wczytywania natywnej biblioteki wczytywania api.js, muszą zostać zmienione, aby jawnie ładowały tę bibliotekę. Oto przykład:

<script src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>

Zmiana interfejsu Google Picker API

Jeśli korzystasz z interfejsu Google Picker API, musisz teraz wywoływać metodę setOrigin() podczas tworzenia selektora i przekazywać w punkcie początkowym google.script.host.origin, jak w tym przykładzie:

function createPicker(oauthToken) {
  var picker = new google.picker.PickerBuilder()
      .addView(google.picker.ViewId.SPREADSHEETS) // Or a different ViewId
      .setOAuthToken(oauthToken)
      .setDeveloperKey(developerKey)
      .setCallback(pickerCallback)
      .setOrigin(google.script.host.origin) // Note the setOrigin
      .build();
  picker.setVisible(true);
}

Pełny przykład działania znajdziesz w tym artykule.

Obsługiwane przeglądarki

Tryb piaskownicy IFRAME opiera się na funkcji piaskownicy iframe w HTML5. Funkcja ta nie jest obsługiwana w niektórych starszych przeglądarkach, takich jak Internet Explorer 9. Może to stanowić problem, jeśli projekt Apps Script:

  • używa HtmlService, oraz
  • poprzednio używany tryb piaskownicy EMULATED lub NATIVE

Przeniesienie tych aplikacji do trybu piaskownicy IFRAME oznacza, że mogą one przestać działać w niektórych starszych przeglądarkach (zwłaszcza IE9 i starszych), które nie obsługują funkcji piaskownicy iframe HTML5.

Ten problem nie dotyczy aplikacji, które już żądają trybu IFRAME lub w ogóle nie używają HtmlService.

Protokół HTTPS jest teraz wymagany w przypadku zaimportowanych zasobów

Poprzednie aplikacje, które importowały zasoby przez HTTP, muszą zmienić się tak, aby korzystały z protokołu HTTPS.

Przesyłanie formularzy nie jest już domyślnie zablokowane

W ramach zasady NATIVE formularze HTML znajdujące się w piaskownicy nie mogą wysyłać ani poruszać się po stronie. Oznacza to, że deweloper może po prostu dodać do przycisku przesyłania moduł obsługi onclick i nie martwić się o to, co stanie się później.

W trybie IFRAME można jednak przesyłać formularze HTML, a jeśli element formularza nie ma określonego atrybutu action, zostanie on przesłany na pustą stronę. Co gorsza, wewnętrzny element iframe przekierowuje na pustą stronę, zanim moduł obsługi onclick zdąży go dokończyć.

Rozwiązaniem jest dodanie do strony kodu JavaScript, który uniemożliwia faktyczne przesłanie elementów formularza, aby moduły obsługi kliknięć miały czas na ich działanie:

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
        event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);
</script>

Pełny przykład znajdziesz w przewodniku po htmlService Komunikacja między klientem a serwerem.