I have a bit of embed code that I need to place on a Google Site, this site will be restricted to our Google domain members. I can place this JavaScript in a Google Gadget and it works fine.
<script type="text/javascript" src='https://HOSTNAME/Forms/js/forms-embed.js?v=9.2'>
</script>
<script type="text/javascript">
var lfembed = new LaserficheForms.Form(null /*element to place form in*/,{bpid: '1', host:'https://HOSTNAME/Forms', params:PARAMS, autoheight: false}).getFrm();
lfembed.style.height = "100%";
</script>
The problem is that I want to be able to get the currently logged in user's email address and pass that in the params: section of the code above.
From what I can tell, you can't do this within a Google Gadget. I can retrieve the current email address with the Google Apps Script object below, but I don't know how to make the two work together.
function doGet() {
var gauser = Session.getActiveUser().getEmail();
var output = ContentService.createTextOutput(gauser);
return output;
}
Another problem is that Google sanitizes some of the JavaScript when I try to include all of the code in just the Google Apps Script.
I really don't have much experience in this area, so if anyone could point me in the right direction I'd appreciate it.
I learned about JSONP today.
I ended up getting this to work by publishing the following Google Apps Script web app.
function doGet(request) {
var gauser = Session.getActiveUser().getEmail();
return ContentService.createTextOutput(
request.parameters.prefix + '(' + JSON.stringify(gauser) + ')')
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
Then I called the web app service via URL in my XML Gadget
<script src="https://WEBAPPURL?prefix=lfdo"></script>
This placed the username value into the lfdo function, which I inserted into the parameter string I needed it in.
The full Content section of the XML gadget:
<![CDATA[
<script type="text/javascript" src='https://HOSTNAME/Forms/js/forms-embed.js?v=9.2'></script>
<script type="text/javascript">
function lfdo(gauser) {
console.log(gauser);
var lfembed = new LaserficheForms.Form(null /*element to place form in*/,{bpid: '1', host:'https://HOSTNAME/Forms', params:'Name='+ gauser, autoheight: false}).getFrm();
lfembed.style.height = "100%";
gadgets.window.adjustHeight();
}
</script>
<script src="https://WEBAPPURL?prefix=lfdo"></script>
]]>
This article on Google Developers set me in the right direction.
Related
I am trying to automate sending emails on Google sheets using Mailapp.
My problem is the following:
I need to include the gmail signature in the email.
When using Mailapp, the pre-defined signature on gmail does not appear.
Is there any solution for that?
The other solution, as I found online, is using HTML.
I need to develop the email automation for many users on a single google sheet and need to include Linkedin links.
My issue here is that I am not able to assign HTML's 'href' as a variable (variable that is in fact a cell containing the linkedin link.
JS:
var linkedin_link = SpreadsheetApp.getActiveSheet().getRange(1, 1).getValue();
var templ = HtmlService.createTemplateFromFile("MailTemplate");
var message = templ.evaluate().getContent();
MailApp.sendEmail({
to: "xxx#gmail.com",
subject: "Automation",
htmlBody: message,
});
HTML file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<a href="https://linkedin.com/" + linkedin_link >LINKEDIN</a>
</body>
</html>
If anyone could help it would be great!
Thanks!
If you enable Gmail advance API (under services) you can use this to get the signature as HTML. Then you can use this in your own html template:
function readCurrentOutOfOffice(){
console.log(Gmail.Users.Settings.getVacation('user#company.com'))
}
Update
I found 'webview.executeScript' however, I can't access any of the custom functions.
This is a major step forward though. Any suggestions welcome.
Original post
We developed a Kiosk Web Extension for Chrome OS that loads an externally hosted webpage. The page is loaded into a webview. This page display dynamic information that gets updated daily. In order to push "manual" updates out to the page, we maintain an open WebSocket connection to the Kiosk app. This allows us to refresh the page, update the page, push information, etc. However, we need to access either the javascript loaded inside the webview or we need to access the elements. I'm not sure if I'm explaining this right, or if it is possible to do what I am asking.
Right now we are opening two connections to the websocket server. One is from the webpage and the other is from the extension. The goal is to cut down to one connection.
I added pseudo code to give an idea of what is I need to do.
Chrome Web Extension Kiosk index.html
<html>
<head>
<title></title>
</head>
<body>
<div id="page">
</div>
</body>
</html>
Kiosk example background js
(note: I know this wouldn't be doable via jquery)
document.onLoad({
$("#page").html('<webview id="browser" src="example.com"></webview>');
});
function ReceiveWebSocketMessage(msg) {
switch (msg.cmd) {
case "updatedate":
$("browser").UpdateDate(msg.data);
break;
case "reboot":
chrome.runtime.RebootDevice();
break;
}
}
Webpage example.com
<html>
<head>
<title></title>
</head>
<body>
<div id="datetime">
1/1/2016
</div>
</body>
</html>
Webpage example JS http://example.com/app.js
function UpdateDate(newdate) {
$("#datetime").html = newdate;
}
I threw together a quick diagram of what the old design is like and what the new design is.
To sum it up, I need to access functions that are on the external page. I've not had luck trying to accomplish it.
Resolved! I found the following examples:
https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/webview-samples/shared-script
Basically I added this to my code:
function Execute(code) {
var webview = document.querySelector('webview');
webview.executeScript({
code: generateScriptText(code)
});
}
function generateScriptText(fn) {
var fnText = fn.toString()
.replace(/"/g, '\\"') // Escape double-quotes.
.replace(/(\r?\n|\r)/g, '\\n'); // Insert newlines correctly.
var scriptText =
'(function() {\n' +
' var script = document.createElement("script");\n' +
' script.innerHTML = "(function() { (' + fnText + ')(); })()" \n' +
' document.body.appendChild(script);\n' +
'})()';
return scriptText;
}
Good morning and thank you in advance for the help. I am a noobi at java/gas scripting so any help is appreciated.
On a google spreadsheet I have a custom menu that launches a small html menu that I would like to be able to launch various web pages from. The actual addresses are variable. I have set those as Keys with the property service when the page launches.
Here is the html code (taken from another example and trying to adapt)"
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script type="text/javascript">
var myArr = ["Peter", "Paul", "Tony", "Adam"];
function display(name) {
var accScriptPageLinkID= PropertiesService.getScriptProperties().getProperty('scriptPageLinkAdd');
Logger.log(accScriptPageLinkID)
alert(name);
}
for(var i = 0; i < 4; i ++) {
document.write('<input type="button" onclick="display(this)" name="'+ myArr[i] + '" value="'+ myArr[i] +'">'); // Will log Peter, Paul..
}
</script>
</body>
</html>
I need to modify the above code so that when the button Peter is pressed it opens the Script Page linked under the Property Service Key 'scriptPageLinkAdd'.
Or if there is an easier way to create a dynamic html page for my menu that is linked to cells in the google spreadsheet, please advise.
Mike
PropertiesService (and Logger too) are server-side AppsScript classes - they can't be invoked directly from the client side (your html page).
To invoke them on the server side from your html page you must use google.script.run.withSuccessHandler(clientSideFunctionToProcessReturnedData).someServerSideFunction() which can return some data back to your html page.
Learn more about HtmlService and communicating with the server here
I try to embed this zippyshare player
<script type="text/javascript">var zippywww="54";var zippyfile="JnIxIFUy";var zippytext="#000000";var zippyback="#e8e8e8";var zippyplay="#ff6600";var zippywidth=850;var zippyauto=false;var zippyvol=80;var zippywave = "#000000";var zippyborder = "#cccccc";</script><script type="text/javascript" src="http://api.zippyshare.com/api/embed_new.js"></script>
into a html file on my pc! When I do this and open it, it will show nothing!
Any idea to do this or why it don't work?
Thanks a lot
This is old but kind of interesting since their embed code didn't work out-of-the-box for me either.
Here's how I managed to embed the Zippyshare player into my html for anyone facing this same issue.
If you look at the embed code, there is this <script type="text/javascript" src="http://api.zippyshare.com/api/embed_new.js"></script> at the end of all the declared parameters. Copy that url http://api.zippyshare.com/api/embed_new.js into your browser and there's the iframe you are looking for... right?
This is what it looks like:
var a = navigator.userAgent||navigator.vendor||window.opera;
document.write("<iframe height=\"92\" width=\""+zippywidth+"\" frameBorder=\"0\" src=\""+window.location.protocol+"//api.zippyshare.com/api/jplayer_embed.jsp?key="+zippyfile+"&server=www"+zippywww+"&width="+zippywidth+"\"></iframe>");
Somehow, however, your webpage never receives this. So I copied that part and pasted into my html code, replacing the zippyshare script call and modifying it a bit (replacing escape characters with single quotes). So my html now looks like this:
<body>
<script type="text/javascript">
var zippywww="20";
var zippyfile="CyeL81Cn";
var zippytext="#000000";
var zippyback="#e8e8e8";
var zippyplay="#ff6600";
var zippywidth="100%";
var zippyauto=false;
var zippyvol=80;
var zippywave = "#000000";
var zippyborder = "#cccccc";
var a = navigator.userAgent||navigator.vendor||window.opera;
document.write("<iframe height='92' width='"+zippywidth+"' frameBorder='0' src='http://api.zippyshare.com/api/jplayer_embed.jsp?key="+zippyfile+"&server=www"+zippywww+"&width="+zippywidth+"' allowfullscreen></iframe>");
</script>
<!--script type="text/javascript" src="//api.zippyshare.com/api/embed_new.js"></script-->
</body>
It works, BUT I still wouldn't recommend it as it defeats the core purpose of having an api call. So this is not as much an answer as it is a very temporary fix :) while you figure it out or while Zippyshare figures out what to do with all those unused customization parameters you specify.
We try to display the google ad in an iframe that we add dynamically. In an iframe, the field "src" is generally an url, but we want to use the data:text/html format to be able to use directly our ad code. It works for simple JavaScript code like a document.write('hello world')<\script>, but not with the google ad code.
We simulate this in an html file :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function resizeFrame(f) {
f.style.height = 60 + "px";
}
$(document).ready(function() {;
var htmlCode = document.createElement("div");
var head = document.getElementById('google_ad_468x60');
var myFrame = document.createElement("iframe")
myFrame.name = "childframe"
myFrame.id = "childframe"
myFrame.src = "data:text/html, " + "<script>" + "<!--\ngoogle_ad_client = \"pub-0123456789abcdef\";\ngoogle_alternate_color = \"FFFFFF\";\ngoogle_ad_width = 468;\ngoogle_ad_height = 60;\ngoogle_ad_format = \"468x60_as\";\ngoogle_ad_channel =\"0123456789\";\ngoogle_color_border = \"FFFFC6\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"000000\";\ngoogle_color_url = \"666666\";\ngoogle_color_text = \"333333\";\n//-->"+"<\/script>"+ "<script src = \"http://pagead2.googlesyndication.com/pagead/show_ads.js\">"+"<\/script>"
myFrame.width = "468"
myFrame.scrolling = "no"
myFrame.setAttribute('marginheight', '0px')
myFrame.setAttribute('marginwidth' , '0px')
myFrame.setAttribute('frameborder' , '0' )
head.appendChild(myFrame)
});
</script>
</head>
<body onload="resizeFrame(document.getElementById('childframe'))" bgcolor="#FFFF00">
<div>
<h1>Before Google ad</h1>
</div>
<div id="google_ad_468x60">
<-- Here is display the the Google ad --!>
</div>
<div>
<h1>After Google ad</h1>
</div>
</body>
</html>
We do not have an error with Mozilla, but with Chrome we have this error, in both case the google ad is not displayed:
Unsafe JavaScript attempt to access frame with URL oursitewiththetestfile.com from frame with URL file:///home/lucas/Bureau/google_ad.html from frame with URL data:text/html, <script>google_comments</script> <script type="text/javascript" src="google_path.js"></script>. Domains, protocols and ports must match
In Chrome's intent to keep hackers and virus creators at bay, they do not allow access to an iframe using javascript when it is communicating with a different domain then the site it is hosted on.
You are going to be stuck in this method and I am unsure that there is a workaround. Either way, Google ads should be placed directly into the website as it uses the content to generate relevant advertisements to be displayed on the page. If you are looking for a way to display your own advertisements, it should either be done dynamically, written in the code language of choice, or using the ad creator on adsense.google.com to display your own ads instead of public service ads.
I personally feel that it would be much more simple that way.
Google does not want you to put ads in a frame and will ban you if they find out... Its in the terms of service section 5...