onsenuiを利用してサイドバーを設置しましたが、iframeでMapを表示させるとサイドバーが閉じない

前提・実現したいこと

Monacaを利用して、Onsenui+javascriptにてアプリを制作しています。
サイドバーを<ons-splitter>で作成して、その中のアイテムを選択すると、googlemapをiframeで表示したいと考えいております。

発生している問題・エラーメッセージ

サイドバー単体では動作は問題ないのですが、iframeを使用するとmap表示がされなくなります。
iframeを優先させるとサイドバーが閉じなくなります。

該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15<script>
16    window.fn = {};
17
18    //初期読み込み時のマップ表示
19    window.onload = function() {
20      "use strict";
21      var url = "https://maps.google.co.jp/maps";
22      var param = {
23          tokyo: {
24            center: { lat: 35.681661, lng: 139.767185 }
25          },
26          zoom: 18,
27          lang: "ja"
28        };
29      var name = "tokyo"
30      var iframe = document.getElementById("ifr");
31      // パラメータ指定
32      var p = "?output=embed"
33            + "&ll=" + param[name].center.lat.toString() + "," + param[name].center.lng.toString()
34            + "&z=" + param.zoom.toString()
35            + "&hl=" + param.lang;
36      iframe.setAttribute("src", url + p);
37    }
38
39    window.fn.open = function() {
40      var menu = document.getElementById('menu');
41      menu.open();
42    };
43
44    window.fn.load = function(page,name) {
45      "use strict";
46      var url = "https://maps.google.co.jp/maps";
47      var param = {
48          tokyo: {
49            center: { lat: 35.681661, lng: 139.767185 }
50          },
51          oosaka: {
52            center: { lat: 34.702803, lng: 135.495908 }
53          },
54          zoom: 18,
55          lang: "ja"
56        };
57
58      var content = document.getElementById('content');
59      var menu = document.getElementById('menu');
60      var iframe = document.getElementById("ifr");
61      // パラメータ指定
62      var p = "?output=embed"
63            + "&ll=" + param[name].center.lat.toString() + "," + param[name].center.lng.toString()
64            + "&z=" + param.zoom.toString()
65            + "&hl=" + param.lang;
66      iframe.setAttribute("src", url + p);
67      //alert(url + p);
68
69      content.load(page)
70        .then(menu.close.bind(menu));
71    };
72</script>
73</head>
74<body>
75  <ons-page>
76    <ons-toolbar>
77      <div class="center">Map</div>
78    </ons-toolbar>
79<ons-splitter>
80  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
81    <ons-page>
82      <ons-list>
83        <ons-list-item onclick="fn.load('map1.html','tokyo')" tappable>
84          東京駅
85        </ons-list-item>
86        <ons-list-item onclick="fn.load('map2.html','oosaka')" tappable>
87          大阪駅
88        </ons-list-item>
89      </ons-list>
90    </ons-page>
91  </ons-splitter-side>
92  <ons-splitter-content id="content" page="map1.html"></ons-splitter-content>
93</ons-splitter>
94
95<template id="map1.html">
96  <ons-page>
97    <ons-toolbar>
98      <div class="left">
99        <ons-toolbar-button onclick="fn.open()">
100          <ons-icon icon="md-menu"></ons-icon>
101        </ons-toolbar-button>
102      </div>
103      <div class="center">
104        東京駅
105      </div>
106    </ons-toolbar>
107    <iframe id="ifr" width="100%" height="100%"></iframe>
108  </ons-page>
109</template>
110
111<template id="map2.html">
112  <ons-page>
113    <ons-toolbar>
114      <div class="left">
115        <ons-toolbar-button onclick="fn.open()">
116          <ons-icon icon="md-menu"></ons-icon>
117        </ons-toolbar-button>
118      </div>
119      <div class="center">
120        大阪駅
121      </div>
122    </ons-toolbar>
123    <iframe id="ifr" width="100%" height="100%"></iframe>
124  </ons-page>
125</template>
126  </ons-page>
127</body>
128</html>

試したこと

iframeのsrcに入れるデータをalertで表示させてみましたが、ちゃんと関数内で受け取れていました。

jsavascript
1      content.load(page)
2        .then(menu.close.bind(menu));

javascript内のcontent.loadのタイミングが一番悪さをしていそうですが、どう修正していいかわかりません。

よい方法を教えていただけますでしょうか？
お願い致します。

使用

フレームワーク：onsenui
言語:HTML+CSS+javascript

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

回答1件

ベストアンサー

問題があるコードをピックアップします。

JavaScript
1      var content = document.getElementById('content');
2      var menu = document.getElementById('menu');
3      var iframe = document.getElementById("ifr");
4      // パラメータ指定
5      var p = "?output=embed"
6            + "&ll=" + param[name].center.lat.toString() + "," + param[name].center.lng.toString()
7            + "&z=" + param.zoom.toString()
8            + "&hl=" + param.lang;
9      iframe.setAttribute("src", url + p);
10      //alert(url + p);
11
12      content.load(page)
13        .then(menu.close.bind(menu));

メニューで大阪を選択すると、iframeの属性srcを大阪に変更したあとにcontent.load()を実行しています。
変更したiframeはmap1.html・map2.htmlのどちらでしょうか？
次にcontent.load()を実行すると、どのような動きになりますか？
答えは、map1.htmlのiframeの属性srcを大阪に変更したあとにcontent.load()を実行し、map1.htmlからmap2.htmlに更新しているので、map2.htmlのiframeの属性srcは未設定のままなので、表示されないということです。

やり方は人それぞれですが、メニュー表示(menu.open())・ページ切替(content.load())・ページ初期動作(initイベント)と処理を分ければ、問題なく動作すると思います。

HTML
1<!DOCTYPE HTML>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport"
7    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
8  <meta http-equiv="Content-Security-Policy"
9    content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
10  <script src="components/loader.js"></script>
11  <script src="lib/onsenui/js/onsenui.min.js"></script>
12
13  <link rel="stylesheet" href="components/loader.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
15  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
16  <link rel="stylesheet" href="css/style.css">
17
18  <script>
19    "use strict";
20    var url = "https://maps.google.co.jp/maps";
21    var param = {
22      tokyo: {
23        center: { lat: 35.681661, lng: 139.767185 }
24      },
25      oosaka: {
26        center: { lat: 34.702803, lng: 135.495908 }
27      },
28      zoom: 18,
29      lang: "ja"
30    };
31
32    window.fn = {};
33    // メニュー表示
34    window.fn.open = function () {
35      var menu = document.getElementById('menu');
36      menu.open();
37    };
38    // ページ切替
39    window.fn.load = function (page, name) {
40      var content = document.getElementById('content');
41      content.load(page).then(function () {
42        document.getElementById('menu').close();
43      });
44    };
45    // ページ初期動作
46    document.addEventListener("init", function (event) {
47      var id = event.target.id;
48      if ((id == "map1") || (id == "map2")) {
49        var name = event.target.getAttribute("param-data");
50        var iframe = document.getElementById("ifr");
51        // パラメータ指定
52        var p = "?output=embed"
53          + "&ll=" + param[name].center.lat.toString() + "," + param[name].center.lng.toString()
54          + "&z=" + param.zoom.toString()
55          + "&hl=" + param.lang;
56        iframe.setAttribute("src", url + p);
57      }
58    }, false);
59  </script>
60</head>
61
62<body>
63  <ons-page>
64    <ons-toolbar>
65      <div class="center">Map</div>
66    </ons-toolbar>
67    <ons-splitter>
68      <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
69        <ons-page>
70          <ons-list>
71            <ons-list-item onclick="fn.load('map1.html')" tappable>
72              東京駅
73            </ons-list-item>
74            <ons-list-item onclick="fn.load('map2.html')" tappable>
75              大阪駅
76            </ons-list-item>
77          </ons-list>
78        </ons-page>
79      </ons-splitter-side>
80      <ons-splitter-content id="content" page="map1.html"></ons-splitter-content>
81    </ons-splitter>
82
83    <template id="map1.html">
84      <ons-page id="map1" param-data="tokyo">
85        <ons-toolbar>
86          <div class="left">
87            <ons-toolbar-button onclick="fn.open()">
88              <ons-icon icon="md-menu"></ons-icon>
89            </ons-toolbar-button>
90          </div>
91          <div class="center">
92            東京駅
93          </div>
94        </ons-toolbar>
95        <iframe id="ifr" width="100%" height="100%"></iframe>
96      </ons-page>
97    </template>
98
99    <template id="map2.html">
100      <ons-page id="map2" param-data="oosaka">
101        <ons-toolbar>
102          <div class="left">
103            <ons-toolbar-button onclick="fn.open()">
104              <ons-icon icon="md-menu"></ons-icon>
105            </ons-toolbar-button>
106          </div>
107          <div class="center">
108            大阪駅
109          </div>
110        </ons-toolbar>
111        <iframe id="ifr" width="100%" height="100%"></iframe>
112      </ons-page>
113    </template>
114  </ons-page>
115</body>
116
117</html>