I'm wondering if it is possible with google apps script to display the contents of one html file
return HtmlService.createHtmlOutputFromFile('0');
, within the file have a button, and when the button is pressed it will cause the screen to erase the current information and replace itself with a second html file
return HtmlService.createHtmlOutputFromFile('1');
. *note I am NOT wanting to link to a google document nor another webpage. Simply wanting to know if you can switch between html files within the same script document. If it is possible, my reasoning is to have a "menu" page that will display different topics and keep everthing in one document to be more organized.
It's possible to an extent. We will imply have a function to grab the information from an HTML file and then write it on the page. If you want to be able to navigate, then each .html file you have must have the following function in the <script></script>
function changePage(page) {
document.open(); //should work fine without this
document.write(page);
document.close(); //should work fine without this
}
this bit will handle changing the content of the entire page with new content. Now we need to get that content somehow. This will be done with a function inside of a .gs file in your Google Script that looks like this
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
}
Then inside of your page, whenever you want to change to a new one you need to have let's say a button:
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>
In this case the newPage() function expects a string that will say what is the name of the html. So following the logic we will do
return HtmlService.createHtmlOutputFromFile('success').getContent()`
once we press that button and once that script finishes and returns the string of an HTML we want, we then use that to set the HTML of the current page.
Here is the full example of how it would work. You can navigate between Index.html and success.html
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function changePage(page) {
document.open();
document.write(page);
document.close();
}
</script>
<body>
First Page
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>
</body>
</html>
success.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function changePage(page) {
document.open();
document.write(page);
document.close();
}
</script>
<body>
It worked!
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('Index')">First Page</button>
</body>
</html>
Related
I'm calling a Google Apps Script webapp with a GET request by clicking a link to the webapp's Url, to initiate a function.
The browser automatically opens a tab with the return response.
How can I automatically close that tab immediately or after a few seconds of displaying a message.
I looked around and saw alot of suggestions to add a <script> tag, But it doesn't seem to work. Where am I going wrong?
Code.gs
function doGet(e) {
var pram = e.parameter.param;
// Run some code based off of the parameter
return HtmlService.createHtmlOutputFromFile('confirmation');
}
HTML file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function start(){
setTimeout(function(){ window.top.close(); }, 3000);
}
</script>
</head>
<body onload="start()">
<h2 style="text-align: center;">Your function is being Initiated<br>Please Wait...</h2>
</body>
</html>
The short answer is this cannot be done. please see #TheMaster's comment.
I am creating a custom modal dialog pop up box in Google Sheets via an Apps Script that is running an onEdit trigger. The idea is, the user clicks on a checkbox in some cell in a column. The trigger detects this edit, and calls a function that utilizes Apps Script UI and HtmlService class. This creates a simple modal dialog box that is built using some html. In the html, I have a button that calls window.print(). However, by calling it, nothing happens. I think it's because of the Same Origin Policy issue. The Html Service is likely using another domain name to launch the dialog box that's different than docs.google.com. So, window calls are likely problematic. Is there another way around this? How does one create customized printing for Google Apps? I've seen some variations of creating a pdf on the fly and printing those, but this seems really inefficient for the end user.
When the checkbox is clicked, the following function is called:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('html') ;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Print Receipt');
}
Here is the following html:
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" alt="Logo" width="100" height="100">
<h3>testing</h3>
<button onclick="print()">Print</button>
</body>
<script>
function print() {
window.print();
}
</script>
</html>');
You should consider renaming the print function to something else, say "printPage" else it may be invoking the native print API. Also, the extra parenthesis in the HTML maybe removed.
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" />
<h3>testing</h3>
<button onclick="printPage()">Print</button>
</body>
<script>
function printPage() {
window.print();
}
</script>
</html>
I have the following html code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Soemething</h1>
<button id='btn'>Take me to Google</button>
<script>
document.getElementById('btn').addEventListener('click', doStuff);
function doStuff() {
window.location.assign("https://www.google.com/");
}
</script>
</body>
</html>
How do I wait for Google to load before executing code on google.com such as doing a search?
Thank you
Your script's sandbox is only the page whether it is executing. Once, you are redirected to google.com, your script will become invalid.
Your only option is to get the page via AJAX and run a callback function to execute when the content is loaded.
I dont want to reveal html page content if one specific javascript is not fully loaded. I want to show blank page when this javascript is loading. Javascript is located in .js file, so in html page it looks like this:
<script src = "file.js"></script>
Put the script tag into the head element of the html document, e.g.
<!doctype html>
<html>
<head>
<script src="file.js"></script>
</head>
<body>
</body>
</html>
This depends on whether file.js performs asynchronous operations.
If your file contains simple, synchronous code, a hackish solution would be to put document.body.style.display="none" at the start of the code and document.body.style.display="block" at the end. This will hide your document body until the script reaches the end.
A more robust solution would be to make sure all your code is in appropriate functions, and wrap the initial function with a callback that displays the body.
window.onload = runOnLoad( function() { document.body.style.display="block"; } );
function runOnLoad( callback ) {
document.body.style.display="none";
// rest of your code
callback();
}
//index.php
<head>
<script src="/js/test.js"></script>
<style></style>
</head>
<body>
<script>
callalert();
</script>
</body>
//test.js
function callalert() {
alert('Allertt');
}
eg: i change the fn completely to: callalert(msg) {
var msg;
alert(msg);
}
//and html to:
callalert('Hello!');
//and it wont change, it still says "Allertt"
Anything would be appreciated!
So recently i've tried to implement some javascript libraries to a webpage. But html wont call anything from other js files. I tried many things, calling simple functions from js files, and somtimes it works but when I delete the test, function the page will display the same result as the functions is still there. It will take a long time for it to respond to the changes of the js.
I even tried from diffrent devices.
Anything would be appreciated!
Edit: When i posted this i modified the function from 'Allertt' to 'Hello!'.
Now, that I checked after 5hrs the script is updated. Also, yes this is running online on a server.
I have prepared an example for you, which works perfectly:
HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<script>
myFun();
</script>
</body>
</html>
External JS
function myFun(){
alert('test');
}
This calls myFun from external file, on every refresh, like it should.