質問編集履歴

書式の改善

2019/11/16 14:59

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
 # 期待する処理
-iframe内で画面を遷移させ、現在のページが入力ページである場合（確認から戻ってきた場合など）のみ、changeSelectColor関数とswitchModalStatus関数を一回ずつ走らせたいです。
+iframe内で画面が遷移した際に、repeater関数の5行目を走らせたいです。
@@ -44,7 +44,7 @@
-# 当該コード（再現用簡易版）
+# 当該コード（再現用の簡易版です）
@@ -245,181 +245,3 @@
 ```
-# 当該コード（オリジナル）
-このコードは静的ページで読み込んでいるスクリプトです。
-埋め込んでいる子ページではスクリプトファイルを一切読み込んでいません。
-```javascript
-  const ua = window.navigator.userAgent.toLowerCase(),
-        iframe = document.getElementsByClassName('contact__iframe')[0],
-        modal = document.getElementsByClassName('contact__modal')[0],
-        modalClose = document.getElementsByClassName('contact__modal-close')[0];
-  let currentIframeHeight;
-  let currentIframeTitle;
-  // --------------------------------------
-  // フォームの高さに応じてiframeを伸縮させる関数
-  // --------------------------------------
-  const adjustIframeHeight = () => {
-    console.log("adjustIframeHeight");
-    currentIframeHeight = iframe.contentWindow.document.body.scrollHeight;
-    iframe.style.height = currentIframeHeight + 'px';
-  }
-  // -----------------------------------------
-  // お問い合わせ種別セレクタのカラーを変更する関数
-  // -----------------------------------------
-  const changeSelectColor = () => {
-    console.log("changeSelectColor");
-    const inquirytype = iframe.contentWindow.document.getElementById('contact-inquirytype');
-    // 現在のページにinquirytypeが存在する場合...
-    if (inquirytype) {
-      inquirytype.addEventListener('change', () => {inquirytype.style.color = 'inherit';}, false);
-      // セレクタが既に変更されている場合...
-      if (inquirytype.value)
-        inquirytype.style.color = 'inherit';
-    }
-  }
-  // -----------------------------------------------
-  // 要素のクリックに応じてプライバシーポリシーを開閉する関数
-  // -----------------------------------------------
-  const switchModalStatus = () => {
-    console.log("switchModalStatus");
-    const modalOpen = iframe.contentWindow.document.getElementsByClassName('contact__form-privacypolicy-link')[0];
-    // 現在のページにモーダルのリンクが存在する場合...
-    if (modalOpen)
-      modalOpen.addEventListener('click', () => {modal.classList.toggle('is-active');}, false);
-  }
-  // -----------------------------------------------
-  // iframe内で画面遷移した際に各関数を一回ずつ実行する関数
-  // -----------------------------------------------
-  const repeater = () => {
-    // iframe内の要素が読み込まれてから実行する
-    if (iframe.contentWindow.document.body) {
-      if (currentIframeHeight != iframe.contentWindow.document.body.scrollHeight)
-        adjustIframeHeight();
-// -----------------------------下記の範囲内がエラー箇所です。---------------------------------------------------------
-      if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title')) {
-        console.log("repeater iframe changed");
-        changeSelectColor();
-        switchModalStatus();
-        currentIframeTitle = iframe.contentWindow.document.getElementById('page__title');
-      }
-// ------------------------------------------------------------------------------------------------------------------
-    }
-    window.requestAnimationFrame(repeater);
-  }
-  // ---------------------------
-  // ページの読み込み時に実行する処理
-  // ---------------------------
-  modalClose.addEventListener('click', () => {modal.classList.toggle('is-active');}, false);
-  // iOS端末はブラウザバックでJavaScriptが再実行されないので、pageshowで対処する
-	if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1) {
-    window.addEventListener('pageshow', () => {
-      adjustIframeHeight();
-      repeater();
-    }, false);
-  } else {
-    window.addEventListener('load', () => {
-      adjustIframeHeight();
-      repeater();
-    }, false);
-  }
-```

情報の追加

2019/11/16 14:59

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,9 +16,21 @@
 # エラー内容
+**※修正**
+IEのコンソールに出力されるエラー分は下記の通りです。
+> SCRIPT70: 書き込みできません。
+> working (624,9)
-IEのコンソールでは、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
+working (624,9)は、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
-でエラーとなっているようで、このif文を排除すると問題なく処理されます。（if分を排除しているので1フレームに1回実行されますが…）
+を指しており、このif文を排除すると問題なく処理されます。（if分を排除しているので1フレームに1回実行されますが…）
 自分がデバッグした範囲ではcurrentIframeTitleが怪しいのですが…。
@@ -32,7 +44,211 @@
+# 当該コード（再現用簡易版）
+iframeを埋め込んでいる親ページです。（index.html）
+```HTML
+<!DOCTYPE html>
+<html lang="ja" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+  </head>
+  <body>
+    <iframe class="contact__iframe" src="./iframe.php" style="width: 50%; height: 500px"></iframe>
+    <script src="index.js"></script>
+  </body>
+</html>
+```
+iframeに埋め込まれている子ページです。（iframe.php）
+コードは（https://www.web-officer.com/php/how-to-play-multiple-pages-role-in-one-php-file.php）
+上記の記事から拝借してきました。このコードでもエラーが発現しました。
+```php
+<?php
+if($_SERVER['REQUEST_METHOD']=="POST") {
+	$transition = $_POST['transition'];
+	$name = $_POST['name'];
+	if($transition == "first") {
+		$transition = "second";
+	}else if($transition == "second") {
+		$transition = "finish";
+	}
+}else {
+	$transition = "first";
+}
+?>
+<?php if($transition == "first") { ?>
+  <title>page1</title>
+  <p>お名前を入力して下さい。</p>
+<?php }else if($transition == "second") { ?>
+  <title>page2</title>
+  <p>下記の内容で送信します。宜しければ「送信」ボタンをクリックして下さい。</p>
+  <input name="name" type="hidden" value="<?=$name?>">
+<?php }elseif($transition == "finish") { ?>
+  <title>page3</title>
+  <p>送信が完了しました。ありがとうございました。</p>
+<?php } ?>
+<?php if($transition != "finish") { ?>
+<form method="post" action="">
+	<table>
+  	<tr>
+  		<td>お名前</td>
+  		<td><input name="name" type="text" value="test"></td>
+  	</tr>
+	</table>
+	<input name="transition" type="hidden" value="<?php echo $transition ?>">
+	<input type="submit" />
+</form>
+<?php } ?>
+```
+親ページで読み込んでいるスクリプトです。（index.js）
+オリジナルのコードを簡略化しております。
+```javascript
+(function () {
+  'use strict';
+  {
+    var iframe = document.getElementsByClassName('contact__iframe')[0];
+    var currentIframeTitle = 0; // -----------------------------------------------
+    // iframe内で画面遷移した際に各関数を一回ずつ実行する関数
+    // -----------------------------------------------
+    var repeater = function repeater() {
+      if (iframe.contentWindow.document.body) {
+        // currentIframeTitle変数と表示しているページのタイトルタグを比べて、ページが遷移したかどうかを判定する
+        if (currentIframeTitle != iframe.contentWindow.document.getElementsByTagName('title')) {
+          // この中に一回ずつ実行したい関数を記述して、最後にcurrentIframeTitleに現在ページのタイトルタグを代入する。
+          currentIframeTitle = iframe.contentWindow.document.getElementsByTagName('title');
+          console.log("page transition");
+        }
+      } // requestAnimationFrameで、1フレームに1回実行する
+      window.requestAnimationFrame(repeater);
+    }; // ---------------------------
+    // ページの読み込み時に実行する処理
+    // ---------------------------
+    window.addEventListener('load', function () {
+      repeater();
+    }, false);
+  }
+}());
+```
-# 当該コード
+# 当該コード（オリジナル）

コードの修正

2019/11/16 10:51

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -26,6 +26,8 @@
+なお、静的ページと埋め込んでいる子ページは同一ドメイン内に設置しております。
 よろしくお願いいたします。

コードの修正

2019/11/15 16:22

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -32,6 +32,14 @@
 # 当該コード
+このコードは静的ページで読み込んでいるスクリプトです。
+埋め込んでいる子ページではスクリプトファイルを一切読み込んでいません。
 ```javascript

誤字の修正

2019/11/15 16:19

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
 # 期待する処理
-iframe内で画面が遷移した際にchangeSelectColor関数とswitchModalStatus関数を一回ずつ走らせたいです。
+iframe内で画面を遷移させ、現在のページが入力ページである場合（確認から戻ってきた場合など）のみ、changeSelectColor関数とswitchModalStatus関数を一回ずつ走らせたいです。

エラー内容の追加

2019/11/15 16:15

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,7 +16,11 @@
 # エラー内容
-IEのコンソールでは、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`でエラーとなっているようで、このif文を排除すると問題なく処理されます。（if分を排除しているので1フレームに1回実行されますが…）
+IEのコンソールでは、repeater関数内の`if (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))`
+でエラーとなっているようで、このif文を排除すると問題なく処理されます。（if分を排除しているので1フレームに1回実行されますが…）
+自分がデバッグした範囲ではcurrentIframeTitleが怪しいのですが…。
 静的ページをロードした後の初回実行では、上記のif文もエラー出力されず正しく処理されます。