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

Question

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

Answer 1

问题：

你可以试试

window.top.location = link;

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

window.parent.parent.location = link;

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

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

解决办法：

• 使用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：

<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>

参考资料：

• Basic GAS webapp structure

• postMessage

• iFrame