ボタンをクリックしてHTMLファイルをiframeに表示することはできますか？

Code

html
1<iframe></iframe><input type="button">

script
1function doGet(){return HtmlService.createTemplateFromFile("index").evaluate();}

Action & Question

onclick

どのScriptletsを使用する必要がありますか？
iframe.htmlを表示/呼び出すにはどうすればよいですか？

html
1<input type="button" onclick= /* call function iframe() */>

script
1function iframe(){
2//　display or call HTML file iframe.html* when clicked
3}
4// *iframe.htmlは、同じプロジェクトに存在するHTMLファイルです

Automatic9045

2021/04/06 07:56

iframeで表示させたいのはiframe.htmlの1ファイル固定ですか？

3_April_2021

2021/04/06 13:05

解決策を聞くまで、どちらかを言うのは難しいです。私が今言えることの一つは、タイトルの内容を実行できる限り、両方とも私の問題を解決するのにきっと役立つということです。この答えが役に立たない場合は、今のところ単一のファイルであると想定してください。

行動規範の内容に同意します

回答1件

ベストアンサー

メインのHTMLファイルはindex.html
iframeで表示するHTMLファイルはsub1.html・sub2.html
デプロイしたウェブアプリのURLはhttps://script.google.com/macros/s/1234567890/exec

として説明していきます。

GAS側

###1. 複数のHTMLファイルを返せるようにする
URLのクエリ文字列（例えばhttps://www.example.com/sample.html?a=100&b=hogeであれば、a=100&b=hogeがクエリ文字列です）を判別し、要求に応じて複数のHTMLファイルのどれかを返せるようにします。
以下のサンプルではp=subと指定するとsub.html、それ以外の場合はindex.htmlを返すようにしています。

JS
1function doGet(e) {
2    // クエリ文字列を判別し、表示するべきHTMLファイルの名前をpageNameに代入
3    const pageName = (() => {
4        switch (e.parameter["p"]) {
5            case "sub1":
6                return "sub1.html";
7            case "sub2":
8                return "sub2.html";
9            default:
10                return "index.html";
11        }
12    })();
13
14    const output = HtmlService.createHtmlOutputFromFile(pageName);
15    return output;
16}

###2. iframeで表示したいHTMLOutputについて、iframeでの使用を許可するコードを追加する
output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);とすると、そのHTMLOutputはiframeで表示出来るようになります。
今回の場合は、sub.htmlのHTMLOutputについてこの処理を実行する必要がありますね。

HTML側

方針としては、

表示するHTMLファイル毎にiframeを作っておく
iframeを表示させたくないときにdisplay: none;、表示させたいときにdisplay: block;となるようにJSで実装する

という感じです。

私は以下のように実装してみましたが、色々なやり方があると思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<script>
5		function buttonClick(name) {
6			const iframes = document.getElementById("iframes").children;
7			for (let i = 0; i < iframes.length; i++) {
8				const iframe = iframes.item(i);
9				if (iframe.style.display == "block") {
10					iframe.style.display = "none";
11					break;
12				}
13			}
14			iframes.namedItem(name).style.display = "block";
15		}
16	</script>
17	<style>
18		#iframes div {
19			display: none;
20		}
21	</style>
22</head>
23<body>
24	<div id="iframes">
25		<iframe name="sub1" src="https://script.google.com/macros/s/1234567890/exec?p=sub1"></iframe>
26		<iframe name="sub2" src="https://script.google.com/macros/s/1234567890/exec?p=sub2"></iframe>
27	</div>
28	<button type="button" onclick="buttonClick('sub1')">show sub1</button><br />
29	<button type="button" onclick="buttonClick('sub2')">show sub2</button><br />
30</body>
31</html>

投稿2021/04/06 14:21

Automatic9045

総合スコア313

3_April_2021

2021/04/07 04:11

簡単なチェックを行いましたが、確認に時間がかかる部分があります。評価が遅れることを事前にお詫び申し上げます。

3_April_2021

2021/04/08 04:48

> const pageName = (() => { 「(() =>」の最初の「(」には意味がありますか？

Automatic9045

2021/04/19 11:56 編集

遅くなりました。ラムダ式の記述になりますが、その括弧が無いと正しく実行されません。確認してみて下さい。あるいは、ラムダ式に馴染みが無ければ以下のように書いても動きます。 let pageName; switch (e.parameter["p"]) { case "sub1": pageName = "sub1.html"; break; case "sub2": pageName = "sub2.html"; break; default: pageName = "index.html"; break; }

3_April_2021

2021/04/11 13:39

現時点では、厳密な評価に必要な知識が不足しています。残念ながら、それを入手するには時間がかかりすぎます。先に評価する無礼を許してください。この評価は、最小限の進歩の確認を意味しますが、私にとっては確かな進歩です。心の底からあなたに感謝します。

3_April_2021

2021/08/20 04:01 編集

このコメントは、解決済みの内容だったため編集されました。

行動規範の内容に同意します