Question

0

248

Views

Google Apps Script: HtmlService.createHtmlOutput not working in iframe

Create a blank google docs file
Add the following apps script:

function onOpen(e)
{
    DocumentApp.getUi().createAddonMenu().addItem('Open dialog', 'openDialog').addItem('Open html', 'openHtml').addToUi();
}
function openDialog() {
    DocumentApp.getUi().alert('This works');
}
function openHtml() {
    let output = HtmlService.createHtmlOutput('<b>This works</b>');
    output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    DocumentApp.getUi().showModalDialog(output, 'Title');
}

Now these 2 menu entries appear:

"Open dialog" works:

"Open html" works:

Embed the google docs file in an iframe:

<iframe
   src="https://docs.google.com/document/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/edit"
></iframe>

"Open dialog" works:

"Open html" does not work:

Error message in console:

I thought this is exactly what this line does:

output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

What am I missing?

Here is a link to reproduce that problem:

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-25T21:58:56.601Z

Use createHtmlOutputFromFile('filename') Instead

Based on your setup, I found that you just need to link your html script to your google apps script using createHtmlOutputFromFile(). For my test case, I used the following script:

function onOpen(e)
{
    DocumentApp.getUi().createAddonMenu().addItem('Open dialog', 'openDialog').addItem('Open html', 'openHtml').addToUi();
}
function openDialog() {
    DocumentApp.getUi().alert('This works');
}
function openHtml() {
    var output = HtmlService.createHtmlOutputFromFile('test.html'); //use createHtmlOutputFromFile instead
    output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    DocumentApp.getUi().showModalDialog(output, 'Title');
}

On the other hand, I used the same html that you used in your example.

To add your html to the google apps script project, just click on the plus symbol besides "Files". In this test case, I saved your html under the file name "test.html".

Output

Reference

Class HtmlService/createHtmlOutputFromFile(filename)

0

248