【フォームブリッジ】入力画面、確認画面、完了画面のページ内移動について

Yoshio Fujiwara さん

 

最初の案と、別案の両方で動作が確認できたので共有いたします。

最初の案で動作しなかった原因は、フォームブリッジ側で作成したjson形式に間違いがあったのと、functionの閉じカッコに問題があったようです。

 

以下、それぞれ動作確認したコードを記載いたします。

■最初の案(親ページのトップ部に移動)

※フォームブリッジ側

============================================================

(function() {
 “use strict”;

発生タイミング:フォームから確認画面に移動する前
 fb.events.finish.mounted = [function (state) {

 var message = {“success”:true};//jsonオブジェクトで記述しました。
 var jsonmessage = JSON.stringify(message);//json形式に変換

 window.parent.postMessage(jsonmessage, “*”);

 }];
})();//「 }); 」→「 })(); 」に変更しました。

============================================================

 

※Worpress側(ヘッダー部分)

============================================================

<script type=“text/javascript”>
window.addEventListener(“message”, function(e) {
//var json = JSON.parse(e.data);
//var test = json.success;
if(JSON.parse(e.data).success) {
window.scrollTo(0,0);
}
});
</script>

============================================================

 

■別案(親ページごと別のURLに移動)

※フォームブリッジ側 (テストでgoogleのトップページに飛ぶように設定しています)

============================================================

(function() {
“use strict”;

fb.events.finish.mounted = [function () {

window.parent.location.href = ‘https://google.com’;

}];
})();

============================================================

 

※Worpress側(ヘッダー部分)

============================================================

記載なし

============================================================

 

以上、参考になれば幸いです。