I am facing some strange issue with Google Apps Script modal window HTML parsing mechanism.
Minimal reproduceable example:
var ui = SpreadsheetApp.getUi();
var template = HtmlService.createTemplateFromFile('html/test');
var html = template.evaluate().setWidth(1920).setHeight(1080);
ui.showModalDialog(html, 'Test');
html/test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
https://test.com/#gid=0&range=A1:B1
</body>
</html>
Expected output in modal window: link that points to https://test.com/#gid=0&range=A1:B1.
Actual link unexpectedly points to different URL: https://test.com/#gid=0%E2%A6%A5=A1:B1.
Google Chrome developer tools shows next link's HTML:
https://test.com/#gid=0&range=A1:B1
Why link's href gets overwritten? Is there anything can be done to make Google Apps Script display links as is?
Try it this way:
gs:
function displayMyDialog() {
var ui = SpreadsheetApp.getUi();
var template = HtmlService.createTemplateFromFile('ah3');//my html file name
var html = template.evaluate().setWidth(1200).setHeight(450);//change to fit my window
ui.showModalDialog(html, 'Test');
}
Replace & with &
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
https://test.com/#gid=0&range=A1:B1
</body>
</html>
honestly I can't remember where I learned this.
Related
So I tried this answer to fetch an HTML document, but the issue I have is that I get the following: [object HTMLDocument].
What I want is to have the content of the HTMLDocument. Anyone knows how to do that?
Additionally, in my HTML module, do I need to create a new whole page like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
this is some html text that needs to be <em>emphasized</em>.
</body>
</html>
or can I simply put lines of HTML like this:
this is some html text that needs to be <em>emphasized</em>.
I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)
My GSP file (in Grails 3.1.10):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<asset:javascript src="jquery-2.2.0.min.js"/>
<asset:javascript src="myfile.js"/>
</head>
<body>
<span id="greeting"></span>
</body>
</html>
myfile.js:
greeting = "${resp}"; // resp is passed from controller
$(document).ready(function(){
$('#greeting').val(greeting);
});
Well, I believe in that every grails developer knows if I move myfile.js into my GSP file, it will work.
However, I hope to know how to let the standalone js file can handle the inline variable of GString correctly.
Thanks.
Below is the approach I followed when ran into same problem like yours.
Pass your GString variable to external JS by following way.
Add the below function in your external JS
function view_handler_function(greetingValue){
//assign the value to your element
$('#greeting').val(greetingValue);
.....
//Your other handling code
}
Call your function from your view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<asset:javascript src="jquery-2.2.0.min.js"/>
<asset:javascript src="myfile.js"/>
</head>
<body>
<span id="greeting"></span>
<script>
var greeting = "${resp}"; // resp is passed from controller
$(document).ready(function(){
//call to your external function
view_handler_function(greeting);
});
</script>
</body>
</html>
Note: This may or may not be the exact answer you are looking for but just one way around I follow.
this is out of the box simply not possible, and it's not a good idea either (although of course you could use a controller action as javascript src and in that action read in the js file and run it's content through a e.g. simpleTemplateEngine)
having js files be interpreted like gstrings/other templates would mean that any caching (bundle files via asset pipeline, cdn distribution and browser caching) had to be disabled.
however, you can simply serve the js files statically and e.g. provide your dynamic input as global variables in inline javascript (e.g. from your layout):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="greeting"></span>
<g:javascript>
var greeting = "${resp}";
</g:javascript>
<asset:javascript src="jquery-2.2.0.min.js"/>
<asset:javascript src="myfile.js"/>
</body>
</html>
I'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)
I'm trying to create a redirect page but I need to use two parameters to create the address link.
<!DOCTYPE html>
<!--
Test file
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="0;url=link" />-->
</head>
<body>
<p>Redirecting...</p>
<script language="javascript">
var chapterx = document.getElementById("chapter").value;
var linex = document.getElementById("line").value;
var link = "http://www.mypage.com/help?chapter=" + chapterx + "," + linex;
//window.prompt(link);
window.location = link;
</script>
</body>
</html>
I'm testing this by loading the page from my PC, not from the server.
I have very basic concept about HTML and JS and I can't figure out what I'm doing wrong.
I read something from Redirect from an HTML page to create that code.
Plus, theres any way to write the 'link' variable before redirect to see what happen?
Also I have Firebug installed but I cant found the variables that I declared to see their status.
Your code is correct. But it will not work because JavaScript detects an error on that line:
var chapterx = document.getElementById("chapter").value;
You don't have any element on your page with the chapter id. Your next line is erroneous too because there is no element on your page with the line id.
I added this to your code:
<div id="chapter"></div>
<div id="line"></div>
after <p>Redirecting...</p> and it successfully redirected me to:
http://www.mypage.com/help?chapter=undefined,undefined
Hopefully that helped?:)
Reading the link posted by Lucio I make the following code
<!DOCTYPE html>
<!--
Test file
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="0;url=link" />-->
</head>
<body>
<p>Redirecting...</p>
<script language="javascript">
var chapterx = decodeURIComponent(window.location.search.match(/(\?|&)chap\=([^&]*)/)[2]);
var linex = decodeURIComponent(window.location.search.match(/(\?|&)lin\=([^&]*)/)[2]);
var link = "http://www.myweb.com/help.html?chapter=" + chapterx + "," + linex;
window.location = link;
</script>
</body>
</html>