I'm inserting an Apps Script Html Service gadget into a google site. Is there some way to make the site page height and script container height dynamic to avoid scroll bars on the inserted gadget?
If it was possible, it would be in the:
Apps Script Sites Service
But I don't see any method for adding or editing a Gadget.
The only way I'm guessing that this might be possible, is if you got the HTML out of the current page:
var site = SitesApp.getSite("example.com", "mysite");
var page = site.getChildren()[0];
Logger.log(page.getHtmlContent());
var pageHTML = page.getHtmlContent();
edited the HTML to change in code with string functions,
var stringPageHTML = page.getHtmlContent();
//Find the HTML string you want to change, and change
//it with JavaScript string functions
var newHTML = "New HTML";
Delete the page:
page.deletePage();
Add a new page:
page.createWebPage(title, name, newHTML)
Last I checked, the gadget iframe height / width had to be about 50 pixels larger than the web app for no scroll bars to appear. When inserting the web app into the gadget it asks you for height in fixed pixels not a percentage. So I think getting the Sites page to be fully responsive is out the question.
Related
i am working on some project, there i need a webpage.which have only this kind of facility. By using html i know that we can use multiple tabs in a single tab by using iframe, but each iframe works differently. What i need is, suppose i have two iframes in a single tab of chrome, so if i open a website in 1st iframe it should also open in another i frame.
So making it more clear here is a simple example: suppose i have 5 iframes with YouTube in those frames, so i click on comment in one frame but it should be clicked in each iframe.
And when i type 'hi' in one iframes YouTube comment box, it should be typed in each of the 5 iframes YouTube comment box. And when i click on post, it should be posted simultaneously at the same time in each of the 5 iframes.
So i want to make twin pages using iframes.
Hope you guys understanding my question..
I can give you some general guidance:
You cannot access an element from JS on your client directly need to either :
use .contentWindow.document for Vanilla Js or Contents() for Jquery
Jquery W3school e.g.
https://www.w3schools.com/jquery/traversing_contents.asp
here I have 2 iframes: the code is repeated but it severs to show the example
what you need to do is clean it so its not repeated then transfer the values or make a more robust transfer - e.g. loop though elements , pass parameters
<iframe id="myFrame" src="/your-iframe" style="your style"></iframe>
<iframe id="myFrame2" src="/your-iframe" style="your style"></iframe>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
/iframe 1
var iframe = document.getElementById("myFrame");
var elmnt1 = iframe.contentWindow.document.getElementsById("yourelement");
elmnt1.style.display = "none";
/iframe 2
var iframe = document.getElementById("myFrame2");
var elmnt1 = iframe.contentWindow.document.getElementsById("yourelement");
elmnt1.style.display = "none";
}
</script>
this is just do illustrate the idea :
now you build the client side around this idea
I have already looked at this and I am still stuck trying to find a solution.
I'm trying to create a UI flow in a Google Sheets sidebar application. Right now the only way for me to load in new HTML into the sidebar is to regenerate the sidebar entirely with this code:
function getNextPage() {
var htmlOutput = HtmlService
.createHtmlOutputFromFile('page')
.setTitle('page');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
How do I get my sidebar to load in a new HTML page without loading a new sidebar entirely?
The problem with displaying google picker in apps script when placing the script in a iframe of another web site. When you call the picker, a white square is displayed.
Not in the frame of another web site, the picker works fine.
HtmlService google apps script
function doGet() {
return HtmlService.createTemplateFromFile('form.html')
.evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);}
https://stackoverflow.com/questions/40842627/embedding-google-apps-script-in-an-iframe#answer-40843413
The picker is based on this documentation -
https://developers.google.com/apps-script/guides/dialogs#file-open_dialogs
I decided to try a demo premium script File Upload Form.
https://ctrlq.org/code/19747-google-forms-upload-files
Will insert the script into the frame, but the result was similar - an empty white square.
https://script.google.com/macros/s/AKfycbxlX3r_dt_ZLZC9TqloaqtdextROJoIH9mUDu3MWOiXtI6ADhqb/exec
Example
http://jsfiddle.net/qqq7df51/
Whether it is possible to solve this problem.
I know that this is an old post, but it was the closest that met the search for the white-blank picker issue when the Google Picker is called from a Google Apps Script web app with the error.
Incorrect origin value. Please set it to - (window.location.protocol + '//' + window.location.host) of the top-most page
The suggestion in the error log didn't work for me, but I found a clue here.
My solution was to set the Picker site origin to the site that my iFrame was in.
For example, if I embedded my web app in 'https://www.example.com' then my picker method would be:
.setOrigin("https://www.example.com")
An example of the full constructor might look like this:
//Builds the picker
const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
.setOAuthToken(config.oauthToken)
.addView(view)
.setDeveloperKey(config.developerKey)
// .setOrigin(google.script.host.origin) // Don't use this.
.setOrigin("https://www.example.com") // Add your base URL here.
.setSize(DIALOG_DIMENSIONS.width,
DIALOG_DIMENSIONS.height)
.setCallback(pickerCallback)
.build()
If you intend to use Web App project as standalone and as embedded version at the same time, the same file picker will require different origin urls. To avoid hard-coding and chaning urls, I just get the right one from ancestorOrigins. It's the last one in array.
var url = window.location.ancestorOrigins[window.location.ancestorOrigins.length-1];
new google.picker.PickerBuilder().setOrigin(url);
As mentioned in Enum XFrameOptionsMode,
Setting XFrameOptionsMode.ALLOWALL will let any site iframe the page, so the developer should implement their own protection against clickjacking.
With this, you may want to check implementation of protection against clickjacking. Try to add the X-Frame-Options HTTP Response header to any page that you want to protect from being clickjacked via framebusting.
For more information, visit Clickjacking Defense Cheat Sheet.
is it possible to add simple button with onclick event to a page with chrome extension?
for instance if I am looking at
google.com
var google = document.getElementById("main");
var button = document.createElement("button");
var text = document.createTextNode("test");
button.appendChild(text);
google.appendChild(button);
I see my button in it?
You can use that code in a content script set to run on specific webpages.
Content scripts are JavaScript files that run in the context of web
pages. By using the standard Document Object Model (DOM), they can
read details of the web pages the browser visits, or make changes to
them.
I've create a google apps script chart which looks fine when I run publish > deploy > Test web app for your latest code.
However, once it's inserted as script gadget on a page of a google site, I can't modify its horizontal alignment:
clicking the left/center/right icon to modify alignment of the script gadget while editing the page in google site does nothing
I've tried deploying the app as UiApp.createApplication() as-is and then within a horizontal panel with various settings of HorizontalAlignment: nothing changes.
Creating charts with google apps script is easy enough, but aligning the results on a google page is frustrating.
uiApp = UiApp.createApplication().setTitle('TheTitle').add( chart );
var hpanel = uiApp.createHorizontalPanel()
hpanel.add(chart).setHorizontalAlignment(UiApp.HorizontalAlignment.LEFT)
uiApp.add(hpanel);
return uiApp;
Try changing the width of the hpanel to like var hpanel = uiApp.createHorizontalPanel().setWidth(800) and you may notice the alignment change then.