מעבר למצב ארגז חול של IFRAME

ב-Google Apps Script נעשה שימוש בארגז חול מאובטח כדי לספק בידוד מגן לאפליקציות של Google Workspace במצבים מסוימים. כל מצבי ארגז החול הוצאו משימוש, מלבד IFRAME. אפליקציות שמשתמשות במצבי ארגז חול ישנים יותר משתמשות עכשיו במצב IFRAME החדש יותר באופן אוטומטי.

יכול להיות שיהיה צורך לבצע שינויים באפליקציות שהשתמשו בעבר במצבים הישנים האלה עם שירות ה-HTML כדי להתאים אותן למצב IFRAME. הסיבה לכך היא ההבדלים הבאים:

עכשיו אתם צריכים לשנות את מאפיין הקישור target באמצעות target="_top" או target="_blank".
קובצי HTML שמוצגים על ידי שירות ה-HTML חייבים לכלול את התגים <‎!DOCTYPE html>,‏ <html> ו-<body>
ספריית הטעינה gapi (api.js) לא נטענת אוטומטית במצב IFRAME
משתמשי Picker צריכים להתקשר אל setOrigin כי התוכן מוגש מדומיין חדש
חלק מהדפדפנים הישנים, כולל IE9, לא נתמכים
מעכשיו, משאבים מיובאים צריכים להשתמש ב-HTTPS
כברירת מחדל, כבר לא נמנעת שליחת טפסים

ההבדלים האלה מפורטים בקטעים הבאים.

הגדרת מאפיין יעד הקישור

במצב IFRAME, צריך להגדיר את מאפיין יעד הקישור ל-_top או ל-_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>

אפשר גם לשנות את ברירת המחדל של המאפיין הזה באמצעות התג <base> בקטע head של דף האינטרנט המכיל:

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

תגי HTML ברמה העליונה

במצב ארגז חול NATIVE (וגם EMULATED), תגי HTML מסוימים יתווספו אוטומטית לקובץ ‎ .html של Apps Script, אבל זה לא קורה כשמשתמשים במצב IFRAME.

כדי לוודא שדפי הפרויקט מוצגים בצורה נכונה באמצעות IFRAME, צריך להוסיף את התוכן של הדף לתגי הרמה העליונה הבאים:

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

צריך לטעון את ספריית הטוען של gapi באופן מפורש

צריך לשנות סקריפטים שהסתמכו על טעינה אוטומטית של ספריית הטעינה gapi (api.js) כך שהטעינה של הספרייה הזו תתבצע באופן מפורש, כמו בדוגמה הבאה:

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

שינוי ב-Google Picker API

כשמשתמשים ב-Google Picker API, צריך עכשיו להפעיל את setOrigin כשיוצרים את PickerBuilder ולהעביר את המקור google.script.host.origin, כמו בדוגמה הבאה:

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);
}

דוגמה מלאה שעובדת זמינה במאמר בנושא תיבות דו-שיח לפתיחת קבצים.

תמיכה בדפדפנים

IFRAME מצב ארגז החול מבוסס על התכונה iframe sandboxing ב-HTML5. האפשרות הזו לא נתמכת בדפדפנים ישנים יותר, כמו Internet Explorer 9. הבעיה הזו יכולה לקרות אם פרויקט Apps Script שלכם:

נעשה שימוש ב-HtmlService, ו
נעשה שימוש בעבר ב-EMULATED או ב-NATIVE sandboxing

העברת האפליקציות האלה למצב ארגז חול של IFRAME פירושה שהן לא יפעלו יותר בדפדפנים ישנים מסוימים (בעיקר IE9 וגרסאות קודמות) שלא תומכים בתכונת ארגז החול של iframe ב-HTML5.

הבעיה הזו לא משפיעה על אפליקציות שכבר מבקשות מצב IFRAME או שלא משתמשות ב-IFRAME בכלל.HtmlService

מעכשיו נדרש HTTPS למשאבים מיובאים

באפליקציות קודמות שייבאו משאבים באמצעות HTTP, צריך לשנות את ההגדרה כך שישתמשו ב-HTTPS.

כברירת מחדל, כבר לא נמנעת שליחת טפסים

בקטע NATIVE, טפסים מסוג HTML שהיו בתוך ארגז חול לא יכלו לשלוח את עצמם או לנווט בדף. לכן, מפתח יכול להוסיף onclickhandler לכפתור השליחה ולא לדאוג לגבי מה שקורה אחרי.

עם זאת, במצב IFRAME מותר לשלוח טפסים ב-HTML, ואם לא מצוין מאפיין action לרכיב טופס, הוא יישלח לדף ריק. גרוע מכך, ה-iframe הפנימי יפנה לדף הריק לפני ש-handler יסיים את הפעולה.onclick

הפתרון הוא להוסיף קוד JavaScript לדף כדי למנוע את השליחה של רכיבי הטופס, כך שיהיה ל-click handlers זמן לפעול:

// 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);

דוגמה מלאה זמינה במדריך HtmlService בנושא תקשורת בין לקוח לשרת.

מעבר למצב ארגז חול של IFRAME קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.