javascript - iframe：设置 document.location 2x 后的白屏

问题描述

我正在创建一个旨在嵌入我的 Wix 网站的 Web 应用程序。

我需要的 Web 应用程序基本上可以简化为一个文本屏幕和一个按钮来更改屏幕视图/页面（显示的 html）。

但是，问题在于，无论我是从“主页”还是“页面”开始，应用程序都会加载两个下一个屏幕并在之后给我一个白屏。

我还尝试了其他选项来更改 url - ie等location.href，window.location甚至尝试通过更改页面<a href= URL，但问题仍然存在。

下面是我的代码的简化：

页面 HTML

    <!DOCTYPE html>
    <html>
    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    
    
      <head>
    <base target="_self">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        </head>
      <body>
          <h1>page page</h1>
              <button id="pagebtn" class="font-family: Raleway; font-size: 16px; waves-effect waves-light btn-small  blue accent-2"><i class="material-icons left">check</i> Navigate to home </button>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    <script> 
    
    document.getElementById("pagebtn").addEventListener("click",changepage);
    
    function changepage(){
    
    
      var url_new = "https://script.google.com/macros/s/AKfycbzKN9vYBa1yQguooTnijIipyMdAMbXo7a61wjWHt0ybCynH2bxj/exec?v=home"; 
      document.location = url_new;
    }
    
    
    </script> 
      </body>
    </html>

主页 HTML

    <!DOCTYPE html>
    <html>
    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    
    
      <head>
        <base target="_self">
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      </head>
      
      
      <body>
          <h1>home page</h1>
              <button id="homebtn" class="font-family: Raleway; font-size: 16px; waves-effect waves-light btn-small  blue accent-2"><i class="material-icons left">check</i> Navigate to page </button>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script> 
    
    document.getElementById("homebtn").addEventListener("click",changepage);
    
    function changepage(){
    
    
      var url_new = "https://script.google.com/macros/s/AKfycbzKN9vYBa1yQguooTnijIipyMdAMbXo7a61wjWHt0ybCynH2bxj/exec?v=page"; 
      document.location = url_new;
    }
    
    
    </script> 
      </body>
    </html>

JS 代码 // Code.gs

var Route = {};

Route.path = function(route, callback) {
  Route[route] = callback;
}

function doGet(event) { //<!-- Not visible to the user, serverside --> 
  Route.path("page", loadPage);
  Route.path("home", loadHome);

  if (Route[event.parameters.v]) {
    return Route[event.parameters.v]();
  } else {
    return HtmlService.createTemplateFromFile("home").evaluate();
  }
  
  Logger.log("do get1 " + event.parameters.v);
}

function loadPage() { //<!-- Not visible to the user, serverside --> 
  var tmp = HtmlService.createTemplateFromFile("page");
  return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function loadHome() { //<!-- Not visible to the user, serverside --> 
  var tmp = HtmlService.createTemplateFromFile("home");
  return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

代码中的链接用于重定向到不同的 url “视图”。

谢谢！

//编辑：不幸的是，仍然没有解决方案，也没有了解这个问题的根本原因。通过简单的测试 - 我发现当使用 window.open 时，脚本可以工作（但是，它会不断打开不希望的新选项卡/窗口。由于网站本身的 URL 不会改变 - 也许这是根本原因问题？（意味着我应该重做路由器或以不同的方式输入 url 以实际更改写入的内容）？

标签： javascripthtmliframe

javascript - iframe：设置 document.location 2x 后的白屏

问题描述

解决方案

推荐阅读