teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

具体例とコードを追加

2020/01/16 06:38

投稿

snoowty
snoowty

スコア23

title CHANGED
File without changes
body CHANGED
@@ -8,4 +8,95 @@
8
8
 
9
9
 
10
10
  Mainの中だけをURLのないようにしたいです。
11
- 上の三本線のメニューやMainは残したままにしたいです。
11
+ 上の三本線のメニューやMainは残したままにしたいです。
12
+
13
+ シンプルな例でまずは実装してみることにしました。
14
+ 以下が具体的なコードの内容です。
15
+
16
+ ```html
17
+ <!DOCTYPE HTML>
18
+ <html>
19
+ <head>
20
+ <meta charset="utf-8">
21
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
22
+ <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'">
23
+ <script src="components/loader.js"></script>
24
+ <script src="lib/onsenui/js/onsenui.min.js"></script>
25
+
26
+ <link rel="stylesheet" href="components/loader.css">
27
+ <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
28
+ <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
29
+ <link rel="stylesheet" href="css/style.css">
30
+
31
+ <script>
32
+ // Page init event
33
+ document.addEventListener('init', function(event) {
34
+ var page = event.target;
35
+
36
+ if (page.matches('#first-page')) {
37
+
38
+ page.querySelector('#push-button').onclick = function() {
39
+ document.querySelector('#navigator').pushPage('page2.html');
40
+ };
41
+
42
+ } else if (page.matches('#second-page')) {
43
+
44
+ page.querySelector('#pop-button').onclick = function() {
45
+ document.querySelector('#navigator').popPage();
46
+ };
47
+
48
+ }
49
+ });
50
+
51
+ if (ons.platform.isIPhoneX()) {
52
+ document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
53
+ document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
54
+ }
55
+ </script>
56
+
57
+ <script>
58
+ function app(){
59
+ location.href='https://teratail.com/', '_blank'};
60
+ </script>
61
+ </head>
62
+ <body>
63
+ <ons-navigator id="navigator" page="page1.html"></ons-navigator>
64
+
65
+ <ons-template id="page1.html">
66
+ <ons-page id="first-page">
67
+ <ons-toolbar>
68
+ <div class="center">Page 1</div>
69
+ </ons-toolbar>
70
+
71
+ <div class="content" style="text-align: center">
72
+ <p>This is the first page.</p>
73
+ <ons-button id="push-button">Push page</ons-button>
74
+ </div>
75
+ </ons-page>
76
+ </ons-template>
77
+
78
+ <ons-template id="page2.html">
79
+ <ons-page id="second-page">
80
+ <ons-toolbar>
81
+ <div class="left"><ons-back-button>Page 1</ons-back-button></div>
82
+ <div class="center">Page 2</div>
83
+
84
+ </ons-toolbar>
85
+
86
+ <div class="content" style="text-align: center">
87
+ <p>This is the second page.</p>
88
+ <ons-button id="pop-button">Pop page</ons-button>
89
+ <ons-button onclick="app()">テスト</ons-button>
90
+
91
+ </div>
92
+ </ons-page>
93
+ </ons-template>
94
+ </body>
95
+ </html>
96
+
97
+ ```
98
+
99
+ ![画面遷移1](6b0775487dd46b9c2055010221e061d2.png)
100
+ ![画面遷移2](6f560f1b3cfb15e85b8c6c32761cdc35.png)
101
+
102
+ テストボタンをクリックするとURLが開くのですが、全画面表示になってしまい、上のメニュータブがなくなってしまいます。

1

現在の状況とやりたいことを具体的に追加

2020/01/16 06:37

投稿

snoowty
snoowty

スコア23

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,10 @@
2
2
 
3
3
  現状では window.open を使ってURLを開いているのですが、これだと戻ってこれません。
4
4
 
5
- よろしくお願いいたします。
5
+ よろしくお願いいたします。
6
+
7
+ ![イメージ説明](b21e0dace0ea38ba02e204f9732593b8.png)
8
+
9
+
10
+ Mainの中だけをURLのないようにしたいです。
11
+ 上の三本線のメニューやMainは残したままにしたいです。