Monacaで一時的にURLを開く

Monacaで一時的にURL先のページを表示させる方法を教えてください。

現状では　window.open　を使ってURLを開いているのですが、これだと戻ってこれません。

よろしくお願いいたします。

Mainの中だけをURLのないようにしたいです。
上の三本線のメニューやMainは残したままにしたいです。

シンプルな例でまずは実装してみることにしました。
以下が具体的なコードの内容です。

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    // Page init event
17    document.addEventListener('init', function(event) {
18      var page = event.target;
19
20      if (page.matches('#first-page')) {
21
22        page.querySelector('#push-button').onclick = function() {
23          document.querySelector('#navigator').pushPage('page2.html');
24        };
25
26      } else if (page.matches('#second-page')) {
27
28        page.querySelector('#pop-button').onclick = function() {
29          document.querySelector('#navigator').popPage();
30        };
31
32      }
33    });
34
35    if (ons.platform.isIPhoneX()) {
36      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
37      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
38    }
39  </script>
40
41  <script>
42      function app(){
43        location.href='https://teratail.com/', '_blank'};
44      </script>
45</head>
46<body>
47  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
48
49  <ons-template id="page1.html">
50    <ons-page id="first-page">
51      <ons-toolbar>
52        <div class="center">Page 1</div>
53      </ons-toolbar>
54
55      <div class="content" style="text-align: center">
56        <p>This is the first page.</p>
57        <ons-button id="push-button">Push page</ons-button>
58      </div>
59    </ons-page>
60  </ons-template>
61
62  <ons-template id="page2.html">
63    <ons-page id="second-page">
64      <ons-toolbar>
65        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
66        <div class="center">Page 2</div>
67
68      </ons-toolbar>
69
70      <div class="content" style="text-align: center">
71        <p>This is the second page.</p>
72        <ons-button id="pop-button">Pop page</ons-button>
73      <ons-button onclick="app()">テスト</ons-button>
74        
75      </div>
76    </ons-page>
77  </ons-template>
78</body>
79</html>
80

テストボタンをクリックするとURLが開くのですが、全画面表示になってしまい、上のメニュータブがなくなってしまいます。

m.ts10806

2020/01/13 08:51

＞一時的にURL先のページを表示させるどこに何をどう表示させたいのでしょうか。要件詳細記載してください。また「Monacaで」と書いていますが、Monacaではなかったらできるということですか？

snoowty

2020/01/16 05:42

スマホの画面の一部にURLの内容を表示させたいです。現在Monacaで開発をしているので、Monacaでしたいということです。他ではやったことはありません。現在の状況は、URL先のリンクを開くことができるのですが、全画面表示になってしまい、Onsen　UIのsplitterが使えなくなってしまいます。

snoowty

2020/01/16 05:42

よろしくお願いいたします。

m.ts10806

2020/01/16 05:45 編集

質問は編集できますので自身が調べたこと試したこと(実際のコード)を含めて追記してください。 ※ただ私はMonaca知りませんので特化した要件であればお応えできません

snoowty

2020/01/16 06:38

追記いたしました。よろしくお願いいたします。

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

回答1件

ベストアンサー

iframeを使用すれば実現できます。
ただし、iOS版でのスクロールの問題やアプリの申請でリジェクトされる可能性がある件については、ここでは触れません。

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    // Page init event
17    document.addEventListener('init', function(event) {
18      var page = event.target;
19
20      if (page.matches('#first-page')) {
21        page.querySelector('#push-button').onclick = function() {
22          document.querySelector('#navigator').pushPage('page2.html');
23        };
24      } else if (page.matches('#second-page')) {
25        page.querySelector('#pop-button').onclick = function() {
26          document.querySelector('#navigator').popPage();
27        };
28        page.querySelector('#test-button').onclick = function() {
29          document.querySelector('#navigator').pushPage('page3.html');
30        };
31      } else if (page.matches('#third-page')) {
32        var toolbar = page.querySelector(".toolbar");
33        var width = page.clientWidth.toString() + "px";
34        var height = (page.clientHeight - toolbar.clientHeight).toString() + "px";
35        console.log("iframe size = " + width + " x " + height);
36        var iframe = page.querySelector("iframe");
37        iframe.style.width = width;
38        iframe.style.height = height;
39      }
40    });
41
42    if (ons.platform.isIPhoneX()) {
43      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
44      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
45    }
46  </script>
47</head>
48<body>
49  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
50
51  <ons-template id="page1.html">
52    <ons-page id="first-page">
53      <ons-toolbar>
54        <div class="center">Page 1</div>
55      </ons-toolbar>
56
57      <div class="content" style="text-align: center">
58        <p>This is the first page.</p>
59        <ons-button id="push-button">Push page</ons-button>
60      </div>
61    </ons-page>
62  </ons-template>
63
64  <ons-template id="page2.html">
65    <ons-page id="second-page">
66      <ons-toolbar>
67        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
68        <div class="center">Page 2</div>
69      </ons-toolbar>
70
71      <div class="content" style="text-align: center">
72        <p>This is the second page.</p>
73        <ons-button id="pop-button">Pop page</ons-button>
74        <ons-button id="test-button">テスト</ons-button>
75      </div>
76    </ons-page>
77  </ons-template>
78
79  <ons-template id="page3.html">
80    <ons-page id="third-page">
81      <ons-toolbar>
82        <div class="left"><ons-back-button>Page 2</ons-back-button></div>
83        <div class="center">Page 3</div>
84      </ons-toolbar>
85      <iframe frameborder="0" src="https://teratail.com/" scrolling="yes"></iframe>
86    </ons-page>
87  </ons-template>
88</body>
89</html>