質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

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

HML
HML

総合スコア11

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0グッド

1クリップ

1357閲覧

投稿2019/12/04 12:53

前提・実現したいこと

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

0

ベストアンサー

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

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>

投稿2019/12/08 10:11

otak-lab

総合スコア276

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。