打开一个模态窗口，其中包含一个iframe，iframe的src属性为变量Google sheets。

huangapple
go评论151阅读模式
英文:

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

问题

我可以在模态窗口中打开一个包含iframe的网页，代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.  <body>
  4.  <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>
  6.  </body>
  7. </html>

其中iframe的链接是硬编码的。但是我需要将iframe的链接作为一个变量从一个Google Apps Script函数中添加进去。

我有以下代码：

Google Apps Script

  1. function openPopup() {
  2.   var html = HtmlService.createHtmlOutputFromFile('index');
  3.       html.mylink = 'https://www.soscisurvey.de/tools/view-chars.php';
  4.       html.setHeight(2000);
  5.       html.setWidth(5000);
  7.   SpreadsheetApp.getUi()
  8.  .showModalDialog(html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME), 'Dialog title');
  9. }

HTML

  1. <!DOCTYPE html>
  2. <html>
  3.  <body>
  4.  <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>
  6.  </body>
  7. </html>

我得到了错误信息：

  1. Error Exception: Malformed HTML content: 
  2. <!DOCTYPE html>
  3. <html>
  4.  <body>
  5.  <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>
  7.  </body>
  8. </html>.

显然它不喜欢src=<?= mylink ?>这一行。

你想知道如何解决这个问题吗？

英文:

I can open an iframe in a modal window with

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.  &lt;body&gt;
  4.  &lt;style&gt;.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%; }&lt;/style&gt;&lt;div class=&#39;embed-container&#39;&gt;&lt;iframe src=&#39;https://www.soscisurvey.de/tools/view-chars.php&#39; style=&#39;border:0&#39;&gt;&lt;/iframe&gt;&lt;/div&gt;
  6.  &lt;/body&gt;
  7. &lt;/html&gt;

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

  1. function openPopup() {
  2.   var html = HtmlService.createHtmlOutputFromFile(&#39;index&#39;);
  3.       html.mylink = &#39;https://www.soscisurvey.de/tools/view-chars.php&#39;
  4.       html.setHeight(2000)
  5.       html.setWidth(5000)
  7.   SpreadsheetApp.getUi()
  8.  .showModalDialog(html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME), &#39;Dialog title&#39;);
  9. }

HTML

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.  &lt;body&gt;
  4.  &lt;style&gt;.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%; }&lt;/style&gt;&lt;div class=&#39;embed-container&#39;&gt;&lt;iframe src=&lt;?= mylink ?&gt; style=&#39;border:0&#39;&gt;&lt;/iframe&gt;&lt;/div&gt;
  6.  &lt;/body&gt;
  7. &lt;/html&gt;

I get the Error.

  1. Error Exception: Malformed HTML content: 
  2. &lt;!DOCTYPE html&gt;
  3. &lt;html&gt;
  4.  &lt;body&gt;
  5.  &lt;style&gt;.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%; }&lt;/style&gt;&lt;div class=&#39;embed-container&#39;&gt;&lt;iframe src=&lt;?= mylink ?&gt; style=&#39;border:0&#39;&gt;&lt;/iframe&gt;&lt;/div&gt;
  7.  &lt;/body&gt;
  8. &lt;/html&gt;.

Clearly it is not liking the src=&lt;?= mylink ?&gt;

How to do this?

Thanks

答案1

得分: 2

这将创建一个没有错误的对话框，但是对话框中没有显示任何内容。也许你可以自己进行下一步操作？

html:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <base target="_top">
  5.   </head>
  6.   <body>
  7.     <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>
  8.     <div class='embed-container'><iframe src=<?= mylink ?> style='border:0'></iframe></div>
  9.   </body>
  10. </html>

GAS:

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

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:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.   &lt;head&gt;
  4.     &lt;base target=&quot;_top&quot;&gt;
  5.   &lt;/head&gt;
  6.   &lt;body&gt;
  7.     &lt;style&gt;.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%; }&lt;/style&gt;
  8.     &lt;div class=&#39;embed-container&#39;&gt;&lt;iframe src=&lt;?= mylink ?&gt; style=&#39;border:0&#39;&gt;&lt;/iframe&gt;&lt;/div&gt;
  9.   &lt;/body&gt;
  10. &lt;/html&gt;

GAS:

  1. function openPopup() {
  2.   var t = HtmlService.createTemplateFromFile(&#39;ah3&#39;);
  3.   t.mylink = &quot;&#39;https://www.soscisurvey.de/tools/view-chars.php&#39;&quot;
  4.   let html = t.evaluate();
  5.   html.setHeight(2000);
  6.   html.setWidth(5000);
  7.   html.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  8.   SpreadsheetApp.getUi().showModalDialog(html, &#39;Dialog title&#39;);
  9. }

答案2

得分: 0

替代方法

> 这可能不是最直接的方法，但你可以尝试使用Google Apps Script的Class google.script.run来传递链接。请参考下面修改过的示例脚本：
>

GS文件

  1. function passLink(){
  2.   return 'https://www.soscisurvey.de/tools/view-chars.php';
  3. }
  5. function openPopup() {
  6.   var html = HtmlService.createHtmlOutputFromFile('index');
  7.       html.setHeight(2000)
  8.       html.setWidth(5000)
  10.   SpreadsheetApp.getUi()
  11.  .showModalDialog(html.setSandboxMode(HtmlService.SandboxMode.IFRAME), 'Dialog title');
  12. }

HTML文件

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.   <style>
  6.     .embed-container {
  7.       position: relative;
  8.       padding-bottom: 54.25%;
  9.       height: 0;
  10.       overflow: hidden;
  11.       min-width: 100%;
  12.     }
  14.     .embed-container iframe,
  15.     .embed-container object,
  16.     .embed-container embed {
  17.       position: absolute;
  18.       top: 0;
  19.       left: 0;
  20.       width: 100%;
  21.       height: 
  22.   </style>
  24.   
  25.     google.script.run.withSuccessHandler(function(link) {
  26.       var iframe = document.getElementById('myIframe');
  27.       iframe.src = link; 
  28.     }).passLink();
  29.   
  32.   <div class='embed-container'><iframe sandbox="allow-forms allow-scripts" id="myIframe" src='' style='border:0'></iframe></div>
  34. </body>
  36. </html>

演示

打开一个模态窗口，其中包含一个iframe，iframe的src属性为变量Google sheets。

英文:

Alternative Method

> This may not be the most straighforward way, but you could try to pass the link instead using the Google Apps Script Class google.script.run. See this sample tweaked script below:
>
>

GS File

  1. function passLink(){
  2.   return &#39;https://www.soscisurvey.de/tools/view-chars.php&#39;;
  3. }
  5. function openPopup() {
  6.   var html = HtmlService.createHtmlOutputFromFile(&#39;index&#39;);
  7.       html.setHeight(2000)
  8.       html.setWidth(5000)
  10.   SpreadsheetApp.getUi()
  11.  .showModalDialog(html.setSandboxMode(HtmlService.SandboxMode.IFRAME), &#39;Dialog title&#39;);
  12. }

HTML File

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  4. &lt;body&gt;
  5.   &lt;style&gt;
  6.     .embed-container {
  7.       position: relative;
  8.       padding-bottom: 54.25%;
  9.       height: 0;
  10.       overflow: hidden;
  11.       min-width: 100%;
  12.     }
  14.     .embed-container iframe,
  15.     .embed-container object,
  16.     .embed-container embed {
  17.       position: absolute;
  18.       top: 0;
  19.       left: 0;
  20.       width: 100%;
  21.       height: 
  22.   &lt;/style&gt;
  24.   
  25.     google.script.run.withSuccessHandler(function(link) {
  26.       var iframe = document.getElementById(&#39;myIframe&#39;);
  27.       iframe.src = link; 
  28.     }).passLink();
  29.   
  32.   &lt;div class=&#39;embed-container&#39;&gt;&lt;iframe sandbox=&quot;allow-forms allow-scripts&quot; id=&quot;myIframe&quot; src=&#39;&#39; style=&#39;border:0&#39;&gt;&lt;/iframe&gt;&lt;/div&gt;
  34. &lt;/body&gt;
  36. &lt;/html&gt;

Demo

打开一个模态窗口，其中包含一个iframe，iframe的src属性为变量Google sheets。

huangapple
  • 本文由 发表于 2023年8月9日 00:41:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76861610.html
  • google-apps-script
  • google-sheets
  • iframe
  • modal-dialog
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定