I'm creating a web application that I aim to embed into my Wix site.
The web application that I need can basically be reduced into a text screen & a button to change the screen view/page (the html that is displayed).
However, the problem is that independent on whether I start from the "home page" or from the "page page", the application loads two next screens and gives me a white screen after.
I've also tried other options for changing the url - ie location.href, window.location and such, and even tried changing the page via <a href= URL , yet the problem persists.
Below is a simplification of my code:
Page 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>
Home 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 // 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);
}
The links in the code are for redirecting to a different url "view".
Thanks!
//Edit: Unfortunately still without a solution nor an understanding of the underlying cause of this problem. By simply testing around - I found that when using window.open the scripts works (however, it keeps opening new tabs/windows that is not desirable. As the URL of the site itself does not change - perhaps this is the underlying reason for this problem? (meaning that I should redo the router or input the url in a different way to actually change what is written)?