英文:
Open an iframe in a modal window where iframe src=variable Google sheets
问题
我可以在模态窗口中打开一个包含iframe的网页，代码如下：
<!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>
其中iframe的链接是硬编码的。但是我需要将iframe的链接作为一个变量从一个Google Apps Script函数中添加进去。
我有以下代码：
Google Apps Script
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>
我得到了错误信息：
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>.
显然它不喜欢src=<?= mylink ?>这一行。
你想知道如何解决这个问题吗？
英文:
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
答案1
得分: 2
这将创建一个没有错误的对话框，但是对话框中没有显示任何内容。也许你可以自己进行下一步操作？
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');
}
英文:
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');
}
答案2
得分: 0
替代方法
> 这可能不是最直接的方法，但你可以尝试使用Google Apps Script的Class google.script.run来传递链接。请参考下面修改过的示例脚本：
>
GS文件
function passLink(){
return 'https://www.soscisurvey.de/tools/view-chars.php';
}
function openPopup() {
var html = HtmlService.createHtmlOutputFromFile('index');
html.setHeight(2000)
html.setWidth(5000)
SpreadsheetApp.getUi()
.showModalDialog(html.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:
</style>
google.script.run.withSuccessHandler(function(link) {
var iframe = document.getElementById('myIframe');
iframe.src = link;
}).passLink();
<div class='embed-container'><iframe sandbox="allow-forms allow-scripts" id="myIframe" src='' style='border:0'></iframe></div>
</body>
</html>
演示
英文:
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
function passLink(){
return 'https://www.soscisurvey.de/tools/view-chars.php';
}
function openPopup() {
var html = HtmlService.createHtmlOutputFromFile('index');
html.setHeight(2000)
html.setWidth(5000)
SpreadsheetApp.getUi()
.showModalDialog(html.setSandboxMode(HtmlService.SandboxMode.IFRAME), 'Dialog title');
}
HTML File
<!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:
</style>
google.script.run.withSuccessHandler(function(link) {
var iframe = document.getElementById('myIframe');
iframe.src = link;
}).passLink();
<div class='embed-container'><iframe sandbox="allow-forms allow-scripts" id="myIframe" src='' style='border:0'></iframe></div>
</body>
</html>
Demo
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论