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

我有一个多页网络应用程序。我希望登录后，用户可以看到他的队友列表并标记他们的出勤状态。我的问题是我无法在 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将 XframeOptionsMode 设置为allowAll或不和base将 HTML 页面上的基本目标切换为“_top”和“_self”。

Issue:

你可以试试

window.top.location = link;

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

window.parent.parent.location = link;

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

不安全的 JavaScript 尝试使用 URL 启动框架导航https://myexamplesite.com...来自 URL https://*.googleusercontent.com/ 的框架...尝试导航的框架已被沙箱化，因此不允许导航其祖先。

解决方案：

• Use 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)]
| |           |  |
| =============  |
|                |
|                |
|                |
==================

Snippet:

沙盒 Html：

<script>
if(window.parent.parent !== window.top){ //if #1 !== top
  //Framed in a another web-app
  //TODO Use proper target origin instead of *
   window.parent.parent.parent.postMessage("[FRAME#1_LINK_TO_CHANGE]","*");//Post to #0
}
</script>

顶框(#0):

<!-- Frame the Apps script Web-App Frame#1-->
<iframe
  src="https://script.google.com/macros/s/[SCRIPT_DEPLOYMENT_ID]/exec"
  >Loading...</iframe
>
<script type="text/javascript">
  const handleMessage = function(event) {
    if (
      event.origin !==
      'https://[SCRIPT_ORIGIN]script.googleusercontent.com'
    ) {
      alert('Origin Disallowed');
      return;
    }
      //TODO Check syntax of event.data before changing iframe src
      document.querySelector('iframe').src = event.data; //Change #1 Link
  };
  window.addEventListener('message', handleMessage);
</script>

参考：

• 基本 GAS Web 应用程序结构

• 发布消息

• iFrame