ボタンをクリックしてiframeにHTMLファイルを表示する方法

ボタンをクリックしたときにiframe.htmlを表示したい。

ボタンをクリックしたときにiframe.htmlを呼び出す方法や、使用するスクリプトレットを尋ねている。

function buttonClick() {
    // ボタンがクリックされたときにiframe.htmlファイルを表示または呼び出す
}

iframe.htmlは同じプロジェクト内に存在するHTMLファイルです。

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

<iframe></iframe>
<input type="button" onclick="buttonClick()">

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

2024/06/28 06:36 編集

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

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

2024/06/28 06:39 編集

回答ありがとうございます。非常に参考になりました。ベストアンサーに選ばせていただきました。

3_April_2021

2021/08/20 04:01 編集

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

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