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

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

ただいまの
回答率

88.64%

静的ページにiframeで埋め込んだお問い合わせフォームにて、Internet Explorerのみ確認画面へ遷移した際にエラーが出力される

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,079

code_teratail

score 16

質問内容

静的ページのiframe内で「入力」、「確認」、「送信完了orエラー」と遷移するお問い合わせフォームにおいて、Internet Explorerで確認した時だけ「SCRIPT70: 書き込みできません。」と表示されてしまいます。
ChromeやFirefoxでは問題ないので、IE特有の問題だと思うのですが…。
問題の箇所は把握できたのですが、原因がわからず対処に困っております。

期待する処理

iframe内で画面が遷移した際に、repeater関数の5行目を走らせたいです。

エラー内容

※修正
IEのコンソールに出力されるエラー分は下記の通りです。

SCRIPT70: 書き込みできません。
working (624,9)

working (624,9)は、repeater関数内のif (currentIframeTitle != iframe.contentWindow.document.getElementById('page__title'))
を指しており、このif文を排除すると問題なく処理されます。(if分を排除しているので1フレームに1回実行されますが…)
自分がデバッグした範囲ではcurrentIframeTitleが怪しいのですが…。
静的ページをロードした後の初回実行では、上記のif文もエラー出力されず正しく処理されます。

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

当該コード(再現用の簡易版です)

iframeを埋め込んでいる親ページです。(index.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
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)
オリジナルのコードを簡略化しております。

(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);
  }

}());
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/11/16 02:53

    エラー文も質問に追記されたほうがよいです。

    キャンセル

  • SurferOnWww

    2019/11/16 06:40

    問題を再現できる必要最低限のところまで今のコードを削っていって、それをサンプルとして提示できませんか? その過程で原因が分かって自己解決できるかもしれませんし、できなくても回答者が問題を再現できれば解決策を出せるかもしれません。

    キャンセル

  • code_teratail

    2019/11/16 19:54 編集

    修正依頼ありがとうございます。

    >>kei344様
    質問内容に記載しております通り、「SCRIPT70: 書き込みできません。」というエラーしか出力されず困っております。エラー内容の欄に全文記載させていただきましたのでご確認いただけますと幸いです。

    >>SurferOnWww様
    再現用の簡易版コードを追加させていただきました。

    キャンセル

回答 2

check解決した方法

+1

自己解決いたしました。

どうやらIEでは、親ページに変更が無かろうが、要素を変数に代入しようが、iframe内で遷移すると遷移元の要素は読み取れないようです。

他のブラウザでもエラーとなっていれば解決が早まったかもしれません。
逆に他のブラウザはなぜ読み取れるんでしょうか…?

今回は変数(currentIframeTitle)に遷移元の要素を保存し、遷移先で使おうとしていたのが原因でした。

対応策として、変数に「遷移元の要素のinnerHTMLを文字列として」保存することで、遷移先ページでも問題なく使用できました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

試していませんが、iframeのロードを待ってから処理をしないとそのエラーが出るのかもしれません。

【ハタさんのブログ(復刻版) : IEでの「書き込みできません」「アクセスできません」の対処】
https://web.archive.org/web/20130402123946/http://blog.xole.net/article.php?id=649

どうやら、typeof unknownという型(?)はオブジェクトがロード中(初期化中)の場合に、undefinedではなく、unknownという値を返すようだ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/16 23:37 編集

    早速のご回答ありがとうございます。

    削除済みのアーカイブページまで紹介していただいて分かりやすかったです。

    コード内に記述してある
    if (iframe.contentWindow.document.body) {`
    にてiframeの読み込みを待っています。

    console.logを利用してエラー付近で使用している変数などをチェックしてみましたが、unknownは見当たりませんでした。

    キャンセル

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

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • トップ
  • JavaScriptに関する質問
  • 静的ページにiframeで埋め込んだお問い合わせフォームにて、Internet Explorerのみ確認画面へ遷移した際にエラーが出力される