从父级导航嵌入的 Google Apps 脚本 iFrame

Question

我有一个多页网络应用程序。我希望登录后，用户可以看到他的队友列表并标记他们的出勤状态。我的问题是我无法在 iFrame 中显示这一点，而不是在 google 脚本原始框架中显示这一点。

例如，我想将其 iFrame 到我自己的网页上。这两天我无法克服这个问题，我读了很多这方面的帖子，也从头开始尝试了另一个应用程序，但还没有运气。

为了澄清起见，我使用渲染函数在框架内重定向用户。正如 @theMaster 提到的，它不是一个多页面 Web 应用程序。

这是我的 doGet 和 Render 函数：

function doGet(e){
    // Logger.log(e);
    Route.path("login",loadLogin);  
    Route.path("admin",loadAdmin);  
    Route.path("view",loadView);
    Route.path("form",loadForm);
if (e.parameters.id){
  LastID=e.parameters.id[0]; 
}
if (e.parameters.t){
  curT=e.parameters.t[0]; 
}  
if (Route[e.parameters.v]) {
  return Route[e.parameters.v]();
} else {
  return render('W-home');
  }    
}

function render(file, argObject){
    var page = HtmlService.createTemplateFromFile(file);
    if (argObject){
        var keys = Object.keys(argObject);
        keys.forEach(function (k){
        page[k]=argObject[k];
        });
    }
    var evalPage =page.evaluate();
    // if (!xFrame){return evalPage;};
    return evalPage.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
} 

我可以从主页转到登录页面，但之后，即使它也不让我去谷歌。在某些情况下，也只是返回框架内的空白页面。

这是我的客户端 JavaScript 示例代码。

function goToForm(EmpNo) {
  var link = "<?!=ScriptApp.getService().getUrl()?>" + "?v=form&id=" + EmpNo[1] + "&t=" + EmpNo[2];
  location.href = link;
  // I tried different way to see if i can conqure this! 
  // if (clickBTN= 'a') {
  //   window.open(link, "_self");
  // } if (clickBTN= 'b') {
  //   location.href=link;
  // } if (clickBTN= 'c') {
  //   openNewURLInTheSameWindow(link);
  // }          
}

我还有两个全局变量xFrame来设置 XframeOptionsModeallowAll或不设置，并将baseHTM 页面上的基本目标切换为“_top”或“_self”。

Answer 1

问题：

你可以试试

window.top.location = link;

它将在顶部框架中加载链接。如果您在网站中构建网络应用程序本身，那么您应该使用

window.parent.parent.location = link;

但这不起作用，因为沙箱会阻止导航文档中的其他框架。sandbox="allow-top-navigation"只允许顶部框架导航，不允许中间框架导航。由于顶部框架是您的网站而不是script.google.com，因此无法导航，您将收到错误消息

不安全的 JavaScript 尝试https://myexamplesite.com从 URL 为 https://*.googleusercontent.com/... 的框架发起对 URL 的框架的导航... 尝试导航的框架已被沙盒化，因此不允许导航其祖先。

解决方案：

• 使用window.postMessage()

  
==================
|Your site       |<-myexamplesite.com [TOP#0]
|                |
| =============  |
| |GASWebApp  |<-|--script.google.com[Frame#1]
| |           |  |
| |=========  |  |
| ||SandBox|  |  |
| ||User   |<-|--|-- Where your html code is
| ||Frame  |  |  |  (*.googleusercontent.com) 
| |=========  |  |   [Frame#2 and #3(Double nested iframe)]
| |           |  |
| =============  |
|                |
|                |
|                |
==================

片段：

沙盒 Html：

window.top.location = link;

顶部框架（#0）：

window.parent.parent.location = link;

参考：

• 基本 GAS Web 应用程序结构

• 发布消息

• 框架