none
フォーム画面のタブ表示について RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    お世話になります。

    統一インターフェイスのフォーム画面で、

    特定条件のタブを分かりやすく背景色を付ける処理を検討していますが

    フォームOnLoadイベントハンドラーにDOM処理を登録したのですが、

    別画面から移動して表示させるとスクリプトエラー(Cannot read property 'style' of null)が出ます。

    しかし、その後、リロードするとエラーは出ず、希望通りに背景色が付きます。

    コードは以下の通り記述していますが、どのように修正すれば、エラーが出ないようになるでしょうか。

    // OnLoadイベントハンドラー登録関数
function loadForm(){
    // 特定タブのカスタムデータ属性要素取得
    const target = window.parent.document.querySelector('[data-id="tablist-tab_test"]');

    // 背景色を変更
    target.style.backgroundColor = "rgb(255,0,0)";
}




    • 編集済み rias.crm 2020年2月18日 0:49
    2020年2月18日 0:45
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票

    こんにちは。

    ご質問いただいた内容で実装し、スクリプトエラーが再現することを確認しました。

    こちらのエラーについてですが、デバッグしてみたところ「セレクタで指定しているidが存在しない」ことが原因で落ちていましたので、恐らくDOM要素が全て読み込まれる前にJavaScriptのOnLoad処理が実行されてしまっていることが原因かと思われます。

    そのため、DOM要素が全て読み込まれた後にタブの背景色を変える処理が実行されるようにする必要があるのですが、どうやらOnLoadのイベントハンドラーに登録されたJavaScriptは、画面の読み込みが完了する前に実行されてしまうケースがあるようなので、私であれば以下の様にJavaScriptが実行されるだけのHTMLファイルをフォーム画面にWebリソースとして配置して、全ての要素が読み込まれた後にJavaScriptが実行されるように実装します(もっとスマートなやり方があるのかもしれませんが…)。

    <html>
<head>
<script type="text/javascript">
window.onload = function () {
    // 特定タブのカスタムデータ属性要素取得
    const target = window.parent.document.querySelector('[data-id="tablist-tab_test"]');
    // 背景色を変更
    target.style.backgroundColor = "rgb(255,0,0)";
};
</script>
</head>
<body>
</body>
</html>

    上記のHTMLについては、実機で動作確認済みで、別画面から遷移してもスクリプトエラーになりませんでした。

    また、JavaScriptが実行されるタイミングについては、以下のサイトが参考になるかと思います。

    https://qiita.com/AkihikoIkeda/items/9dda2dda70b77c8eeca4



    • 編集済み westcoastline 2020年2月18日 2:17
    • 回答としてマーク rias.crm 2020年2月18日 2:38
    2020年2月18日 2:03
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票

    こんにちは。

    ご質問いただいた内容で実装し、スクリプトエラーが再現することを確認しました。

    こちらのエラーについてですが、デバッグしてみたところ「セレクタで指定しているidが存在しない」ことが原因で落ちていましたので、恐らくDOM要素が全て読み込まれる前にJavaScriptのOnLoad処理が実行されてしまっていることが原因かと思われます。

    そのため、DOM要素が全て読み込まれた後にタブの背景色を変える処理が実行されるようにする必要があるのですが、どうやらOnLoadのイベントハンドラーに登録されたJavaScriptは、画面の読み込みが完了する前に実行されてしまうケースがあるようなので、私であれば以下の様にJavaScriptが実行されるだけのHTMLファイルをフォーム画面にWebリソースとして配置して、全ての要素が読み込まれた後にJavaScriptが実行されるように実装します(もっとスマートなやり方があるのかもしれませんが…)。

    <html>
<head>
<script type="text/javascript">
window.onload = function () {
    // 特定タブのカスタムデータ属性要素取得
    const target = window.parent.document.querySelector('[data-id="tablist-tab_test"]');
    // 背景色を変更
    target.style.backgroundColor = "rgb(255,0,0)";
};
</script>
</head>
<body>
</body>
</html>

    上記のHTMLについては、実機で動作確認済みで、別画面から遷移してもスクリプトエラーになりませんでした。

    また、JavaScriptが実行されるタイミングについては、以下のサイトが参考になるかと思います。

    https://qiita.com/AkihikoIkeda/items/9dda2dda70b77c8eeca4



    • 編集済み westcoastline 2020年2月18日 2:17
    • 回答としてマーク rias.crm 2020年2月18日 2:38
    2020年2月18日 2:03
    |
  • Question
    サインインして投票
    0
    サインインして投票

    westcoastline 様

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

    別途webリソースを配置する方法で希望通りの動作が出来ました。

    このような応用的な方法はとても参考になりました。

    ありがとうございました。

    2020年2月18日 2:38
    |