Search code examples
google-apps-scriptgoogle-sheetsiframemodal-dialog

Open an iframe in a modal window where iframe src=variable Google sheets

I can open an iframe in a modal window with

<!DOCTYPE html>
<html>
 <body>
 <style>.embed-container { position: relative; padding-bottom: 54.25%; height: 0; overflow: hidden; min-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.soscisurvey.de/tools/view-chars.php' style='border:0'></iframe></div>

 </body>
</html>

Where the iframe sar link is hard coded. But I need to add the iframe link as a variable from a gas function.

I have

Gas

function openPopup() {
  var html = HtmlService.createHtmlOutputFromFile('index');
      html.mylink = 'https://www.soscisurvey.de/tools/view-chars.php'
      html.setHeight(2000)
      html.setWidth(5000)

  SpreadsheetApp.getUi()
 .showModalDialog(html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME), 'Dialog title');
}

HTML

<!DOCTYPE html>
<html>
 <body>
 <style>.embed-container { position: relative; padding-bottom: 54.25%; height: 0; overflow: hidden; min-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src=<?= mylink ?> style='border:0'></iframe></div>

 </body>
</html>

I get the Error.

Error Exception: Malformed HTML content: 
<!DOCTYPE html>
<html>
 <body>
 <style>.embed-container { position: relative; padding-bottom: 54.25%; height: 0; overflow: hidden; min-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src=<?= mylink ?> style='border:0'></iframe></div>

 </body>
</html>.

Clearly it is not liking the src=<?= mylink ?>

How to do this?

Thanks

Solution

  • This will create a dialog without errors but I don't see anything in the dialog. Perhaps you can take it to the next step on your own?

    html:

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <style>.embed-container { position: relative; padding-bottom: 54.25%; height: 0; overflow: hidden; min-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
    <div class='embed-container'><iframe src=<?= mylink ?> style='border:0'></iframe></div>
  </body>
</html>

    GAS:

    function openPopup() {
  var t = HtmlService.createTemplateFromFile('ah3');
  t.mylink = "'https://www.soscisurvey.de/tools/view-chars.php'"
  let html = t.evaluate();
  html.setHeight(2000);
  html.setWidth(5000);
  html.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
}