質問編集履歴
6
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
問題の箇所は把握できたのですが、原因がわからず対処に困っております。
|
|
5
5
|
|
|
6
6
|
# 期待する処理
|
|
7
|
-
iframe内で画面
|
|
7
|
+
iframe内で画面が遷移した際に、repeater関数の5行目を走らせたいです。
|
|
8
8
|
|
|
9
9
|
# エラー内容
|
|
10
10
|
**※修正**
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
なお、静的ページと埋め込んでいる子ページは同一ドメイン内に設置しております。
|
|
22
22
|
よろしくお願いいたします。
|
|
23
23
|
|
|
24
|
-
# 当該コード（再現用簡易版）
|
|
24
|
+
# 当該コード（再現用の簡易版です）
|
|
25
25
|
|
|
26
26
|
iframeを埋め込んでいる親ページです。（index.html）
|
|
27
27
|
```HTML
|
|
@@ -121,93 +121,4 @@
|
|
|
121
121
|
|
|
122
122
|
}());
|
|
123
123
|
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
# 当該コード（オリジナル）
|
|
127
|
-
|
|
128
|
-
このコードは静的ページで読み込んでいるスクリプトです。
|
|
129
|
-
埋め込んでいる子ページではスクリプトファイルを一切読み込んでいません。
|
|
130
|
-
|
|
131
|
-
```javascript
|
|
132
|
-
|
|
133
|
-
const ua = window.navigator.userAgent.toLowerCase(),
|
|
134
|
-
iframe = document.getElementsByClassName('contact__iframe')[0],
|
|
135
|
-
modal = document.getElementsByClassName('contact__modal')[0],
|
|
136
|
-
modalClose = document.getElementsByClassName('contact__modal-close')[0];
|
|
137
|
-
let currentIframeHeight;
|
|
138
|
-
let currentIframeTitle;
|
|
139
|
-
|
|
140
|
-
// --------------------------------------
|
|
141
|
-
// フォームの高さに応じてiframeを伸縮させる関数
|
|
142
|
-
// --------------------------------------
|
|
143
|
-
const adjustIframeHeight = () => {
|
|
144
|
-
console.log("adjustIframeHeight");
|
|
145
|
-
currentIframeHeight = iframe.contentWindow.document.body.scrollHeight;
|
|
146
|
-
iframe.style.height = currentIframeHeight + 'px';
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// -----------------------------------------
|
|
150
|
-
// お問い合わせ種別セレクタのカラーを変更する関数
|
|
151
|
-
// -----------------------------------------
|
|
152
|
-
const changeSelectColor = () => {
|
|
153
|
-
console.log("changeSelectColor");
|
|
154
|
-
const inquirytype = iframe.contentWindow.document.getElementById('contact-inquirytype');
|
|
155
|
-
// 現在のページにinquirytypeが存在する場合...
|
|
156
|
-
if (inquirytype) {
|
|
157
|
-
inquirytype.addEventListener('change', () => {inquirytype.style.color = 'inherit';}, false);
|
|
158
|
-
// セレクタが既に変更されている場合...
|
|
159
|
-
if (inquirytype.value)
|
|
160
|
-
inquirytype.style.color = 'inherit';
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
// -----------------------------------------------
|
|
165
|
-
// 要素のクリックに応じてプライバシーポリシーを開閉する関数
|
|
166
|
-
// -----------------------------------------------
|
|
167
|
-
const switchModalStatus = () => {
|
|
168
|
-
console.log("switchModalStatus");
|
|
169
|
-
const modalOpen = iframe.contentWindow.document.getElementsByClassName('contact__form-privacypolicy-link')[0];
|
|
170
|
-
// 現在のページにモーダルのリンクが存在する場合...
|
|
171
|
-
if (modalOpen)
|
|
172
|
-
modalOpen.addEventListener('click', () => {modal.classList.toggle('is-active');}, false);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
// -----------------------------------------------
|
|
176
|
-
// iframe内で画面遷移した際に各関数を一回ずつ実行する関数
|
|
177
|
-
// -----------------------------------------------
|
|
178
|
-
const repeater = () => {
|
|
179
|
-
// iframe内の要素が読み込まれてから実行する
|
|
180
|
-
if (iframe.contentWindow.document.body) {
|
|
181
|
-
if (currentIframeHeight != iframe.contentWindow.document.body.scrollHeight)
|
|
182
|
-
adjustIframeHeight();
|
|
183
|
-
// -----------------------------下記の範囲内がエラー箇所です。---------------------------------------------------------
|
|
184
|
-
if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title')) {
|
|
185
|
-
console.log("repeater iframe changed");
|
|
186
|
-
changeSelectColor();
|
|
187
|
-
switchModalStatus();
|
|
188
|
-
currentIframeTitle = iframe.contentWindow.document.getElementById('page__title');
|
|
189
|
-
}
|
|
190
|
-
// ------------------------------------------------------------------------------------------------------------------
|
|
191
|
-
}
|
|
192
|
-
window.requestAnimationFrame(repeater);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
// ---------------------------
|
|
196
|
-
// ページの読み込み時に実行する処理
|
|
197
|
-
// ---------------------------
|
|
198
|
-
modalClose.addEventListener('click', () => {modal.classList.toggle('is-active');}, false);
|
|
199
|
-
|
|
200
|
-
// iOS端末はブラウザバックでJavaScriptが再実行されないので、pageshowで対処する
|
|
201
|
-
if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1) {
|
|
202
|
-
window.addEventListener('pageshow', () => {
|
|
203
|
-
adjustIframeHeight();
|
|
204
|
-
repeater();
|
|
205
|
-
}, false);
|
|
206
|
-
} else {
|
|
207
|
-
window.addEventListener('load', () => {
|
|
208
|
-
adjustIframeHeight();
|
|
209
|
-
repeater();
|
|
210
|
-
}, false);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
124
|
```
|
5
情報の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,16 +7,124 @@
|
|
|
7
7
|
iframe内で画面を遷移させ、現在のページが入力ページである場合（確認から戻ってきた場合など）のみ、changeSelectColor関数とswitchModalStatus関数を一回ずつ走らせたいです。
|
|
8
8
|
|
|
9
9
|
# エラー内容
|
|
10
|
+
**※修正**
|
|
11
|
+
IEのコンソールに出力されるエラー分は下記の通りです。
|
|
12
|
+
|
|
13
|
+
> SCRIPT70: 書き込みできません。
|
|
14
|
+
> working (624,9)
|
|
15
|
+
|
|
10
|
-
|
|
16
|
+
working (624,9)は、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
|
|
11
|
-
|
|
17
|
+
を指しており、このif文を排除すると問題なく処理されます。（if分を排除しているので1フレームに1回実行されますが…）
|
|
12
18
|
自分がデバッグした範囲ではcurrentIframeTitleが怪しいのですが…。
|
|
13
19
|
静的ページをロードした後の初回実行では、上記のif文もエラー出力されず正しく処理されます。
|
|
14
20
|
|
|
15
21
|
なお、静的ページと埋め込んでいる子ページは同一ドメイン内に設置しております。
|
|
16
22
|
よろしくお願いいたします。
|
|
17
23
|
|
|
18
|
-
# 当該コード
|
|
24
|
+
# 当該コード（再現用簡易版）
|
|
19
25
|
|
|
26
|
+
iframeを埋め込んでいる親ページです。（index.html）
|
|
27
|
+
```HTML
|
|
28
|
+
|
|
29
|
+
<!DOCTYPE html>
|
|
30
|
+
<html lang="ja" prefix="og: http://ogp.me/ns#">
|
|
31
|
+
<head>
|
|
32
|
+
<meta charset="utf-8">
|
|
33
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
34
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
35
|
+
</head>
|
|
36
|
+
<body>
|
|
37
|
+
<iframe class="contact__iframe" src="./iframe.php" style="width: 50%; height: 500px"></iframe>
|
|
38
|
+
<script src="index.js"></script>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
iframeに埋め込まれている子ページです。（iframe.php）
|
|
45
|
+
コードは（https://www.web-officer.com/php/how-to-play-multiple-pages-role-in-one-php-file.php）
|
|
46
|
+
上記の記事から拝借してきました。このコードでもエラーが発現しました。
|
|
47
|
+
```php
|
|
48
|
+
|
|
49
|
+
<?php
|
|
50
|
+
if($_SERVER['REQUEST_METHOD']=="POST") {
|
|
51
|
+
$transition = $_POST['transition'];
|
|
52
|
+
$name = $_POST['name'];
|
|
53
|
+
if($transition == "first") {
|
|
54
|
+
$transition = "second";
|
|
55
|
+
}else if($transition == "second") {
|
|
56
|
+
$transition = "finish";
|
|
57
|
+
}
|
|
58
|
+
}else {
|
|
59
|
+
$transition = "first";
|
|
60
|
+
}
|
|
61
|
+
?>
|
|
62
|
+
|
|
63
|
+
<?php if($transition == "first") { ?>
|
|
64
|
+
<title>page1</title>
|
|
65
|
+
<p>お名前を入力して下さい。</p>
|
|
66
|
+
<?php }else if($transition == "second") { ?>
|
|
67
|
+
<title>page2</title>
|
|
68
|
+
<p>下記の内容で送信します。宜しければ「送信」ボタンをクリックして下さい。</p>
|
|
69
|
+
<input name="name" type="hidden" value="<?=$name?>">
|
|
70
|
+
<?php }elseif($transition == "finish") { ?>
|
|
71
|
+
<title>page3</title>
|
|
72
|
+
<p>送信が完了しました。ありがとうございました。</p>
|
|
73
|
+
<?php } ?>
|
|
74
|
+
|
|
75
|
+
<?php if($transition != "finish") { ?>
|
|
76
|
+
<form method="post" action="">
|
|
77
|
+
<table>
|
|
78
|
+
<tr>
|
|
79
|
+
<td>お名前</td>
|
|
80
|
+
<td><input name="name" type="text" value="test"></td>
|
|
81
|
+
</tr>
|
|
82
|
+
</table>
|
|
83
|
+
<input name="transition" type="hidden" value="<?php echo $transition ?>">
|
|
84
|
+
<input type="submit" />
|
|
85
|
+
</form>
|
|
86
|
+
<?php } ?>
|
|
87
|
+
```
|
|
88
|
+
親ページで読み込んでいるスクリプトです。（index.js）
|
|
89
|
+
オリジナルのコードを簡略化しております。
|
|
90
|
+
```javascript
|
|
91
|
+
(function () {
|
|
92
|
+
'use strict';
|
|
93
|
+
|
|
94
|
+
{
|
|
95
|
+
var iframe = document.getElementsByClassName('contact__iframe')[0];
|
|
96
|
+
var currentIframeTitle = 0; // -----------------------------------------------
|
|
97
|
+
// iframe内で画面遷移した際に各関数を一回ずつ実行する関数
|
|
98
|
+
// -----------------------------------------------
|
|
99
|
+
|
|
100
|
+
var repeater = function repeater() {
|
|
101
|
+
if (iframe.contentWindow.document.body) {
|
|
102
|
+
// currentIframeTitle変数と表示しているページのタイトルタグを比べて、ページが遷移したかどうかを判定する
|
|
103
|
+
if (currentIframeTitle != iframe.contentWindow.document.getElementsByTagName('title')) {
|
|
104
|
+
// この中に一回ずつ実行したい関数を記述して、最後にcurrentIframeTitleに現在ページのタイトルタグを代入する。
|
|
105
|
+
currentIframeTitle = iframe.contentWindow.document.getElementsByTagName('title');
|
|
106
|
+
console.log("page transition");
|
|
107
|
+
}
|
|
108
|
+
} // requestAnimationFrameで、1フレームに1回実行する
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
window.requestAnimationFrame(repeater);
|
|
112
|
+
}; // ---------------------------
|
|
113
|
+
// ページの読み込み時に実行する処理
|
|
114
|
+
// ---------------------------
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
window.addEventListener('load', function () {
|
|
118
|
+
repeater();
|
|
119
|
+
}, false);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
}());
|
|
123
|
+
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
# 当該コード（オリジナル）
|
|
127
|
+
|
|
20
128
|
このコードは静的ページで読み込んでいるスクリプトです。
|
|
21
129
|
埋め込んでいる子ページではスクリプトファイルを一切読み込んでいません。
|
|
22
130
|
|
4
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
自分がデバッグした範囲ではcurrentIframeTitleが怪しいのですが…。
|
|
13
13
|
静的ページをロードした後の初回実行では、上記のif文もエラー出力されず正しく処理されます。
|
|
14
14
|
|
|
15
|
+
なお、静的ページと埋め込んでいる子ページは同一ドメイン内に設置しております。
|
|
15
16
|
よろしくお願いいたします。
|
|
16
17
|
|
|
17
18
|
# 当該コード
|
3
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
よろしくお願いいたします。
|
|
16
16
|
|
|
17
17
|
# 当該コード
|
|
18
|
+
|
|
19
|
+
このコードは静的ページで読み込んでいるスクリプトです。
|
|
20
|
+
埋め込んでいる子ページではスクリプトファイルを一切読み込んでいません。
|
|
21
|
+
|
|
18
22
|
```javascript
|
|
19
23
|
|
|
20
24
|
const ua = window.navigator.userAgent.toLowerCase(),
|
2
誤字の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
問題の箇所は把握できたのですが、原因がわからず対処に困っております。
|
|
5
5
|
|
|
6
6
|
# 期待する処理
|
|
7
|
-
iframe内で画面
|
|
7
|
+
iframe内で画面を遷移させ、現在のページが入力ページである場合（確認から戻ってきた場合など）のみ、changeSelectColor関数とswitchModalStatus関数を一回ずつ走らせたいです。
|
|
8
8
|
|
|
9
9
|
# エラー内容
|
|
10
10
|
IEのコンソールでは、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
|
1
エラー内容の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
iframe内で画面が遷移した際にchangeSelectColor関数とswitchModalStatus関数を一回ずつ走らせたいです。
|
|
8
8
|
|
|
9
9
|
# エラー内容
|
|
10
|
-
IEのコンソールでは、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
|
|
10
|
+
IEのコンソールでは、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
|
|
11
|
+
でエラーとなっているようで、このif文を排除すると問題なく処理されます。（if分を排除しているので1フレームに1回実行されますが…）
|
|
12
|
+
自分がデバッグした範囲ではcurrentIframeTitleが怪しいのですが…。
|
|
11
13
|
静的ページをロードした後の初回実行では、上記のif文もエラー出力されず正しく処理されます。
|
|
12
14
|
|
|
13
15
|
よろしくお願いいたします。
|