Google Apps Script in an iFrame: How to embed Google Apps Script in an iFrame?

Presentation
Photo by Firmbee.com on Unsplash

With all great difficulty and effort, you create a Google Apps Script Web App. And now you want that app to be embeddable by way of an iFrame like you do for other Google products like Sheets, Docs, Slides, etc. Well, this was not possible earlier. The exec file of the Web App that you created was not iFrame friendly hitherto. But now it is possible. You can now modify the HtmlOutput class to set the XFrameOptionsMode from .DEFAULT to .ALLOWALL so that it becomes iFrame-friendly.


You can see the Adani Group Dashboard Web App functioning here as an independent single-page Web App. Now, I am embedding the same App here as an iFrame. You can find it functioning here properly:



You can refer to the Google Developers Documentation for the above example:

function doGet() {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Google AppsScript
function doGet() {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

However, I am reproducing the same iFrame in Codepen so that anybody can embed the Web App in the web pages. You are free to use and embed the same in your sites 🚀

See the Pen Adani Group Dashboard by Avadhoot Dandekar (@AvadhootDandekar) on CodePen.


The computer code makes the computers conscious. They are moving towards Artificial Consciousness. And the code of Mindfulness makes the human beings more conscious, which may lead them to the Supreme Consciousness.



Fork me on GitHub

2 Comments

Post a Comment

Previous Post Next Post
Fork me on GitHub