お世話になっております。
掲題の件、フォームブリッジで縦に長い入力画面を作成した際、
確認(回答)ボタンを押してもその位置に留まるので、上にスクロールしないと確認(完了)画面が表示されません。
ボタンを押したタイミングで、iframeタグの始点に自動で移動するといったカスタマイズは可能でしょうか？
お手数ですが、アドバイスなどいただければ幸いです。
y-kishiさん
cstapの瀧ヶ平です。
フォームブリッジ内のカスタマイズで、完了画面に遷移する前後イベントで
scroll(0, 0);
を実行すれば可能です。
また、縦に長いフォームを使うのであればステップフォームを利用するのはどうでしょうか？
cstap 瀧ヶ平 様
ご返答いただきありがとうございます。
確認画面を経由して完了画面を表示するフォームにて、以下のようにカスタマイズしましたが、
画面がスクロールされませんでした。
window.scroll(0, 0);等の記載も試してみましたが同様にスクロールせずでした。
コードの記載方法に誤りはありますでしょうか？
========================================================
(function() {
“use strict”;
//発生タイミング：フォームから確認画面に移動する前
fb.events.form.confirm = [function () {
scroll(0, 0);
}];
})();
========================================================
お手数ですが、よろしくお願いいたします。
ステップフォームについては、今回作成したフォームの要件に少し合わなかったので使用しませんでした。
y-kishiさん
コードの記述に誤りはなさそうなのでこちらの間違いです、すみません。少し勘違いしていたのですが、iframeの中のスクロールではなく、親ページのスクロール制御ということでしょうか？
そうであれば、フォームから確認画面に移行するイベントで、
window.parent.postMessage("{success: true}", "*");
を実行し、iframeを貼っている親ページ上のJSで
window.addEventListener("message", function(e) {
if(JSON.parse(e.data).success) {
scroll(
0,
document
.querySelector("iframe[src^='https://form.kintoneapp.com']")
.getBoundingClientRect().top
);
}
});
を実行すれば良いかと思います。
cstap 瀧ヶ平 様
ご回答いただきありがとうございます。
こちらの説明不足で誤解を招いてしまい申し訳ございません。
仰る通り、iframe内のスクロールではなく親ページ上でのスクロールを実装したいと考えておりました。
教えていただいた内容で実装したところ、問題なくスクロールしました。
iframeを表示する際にpostMessageを使用して高さの自動調整もしておりますので、少しコードを変更して、
以下のように実装しました。
▼フォームブリッジ側のカスタマイズ
//=========================================================
//
// フォームから確認画面に移行する前に始点に移動する
//
//=========================================================
(function() {
“use strict”;
//発生タイミング：フォームから確認画面に移動する前
fb.events.form.confirm = [function (state) {
// postMessage(<送信する値>, <送信先のドメイン>)
window.parent.postMessage(“移動”, ‘<親ページのURL>’);
return state;
}];
})();
▼親ページ側のカスタマイズ
<script type=“text/javascript”>
$(function(){
// メッセージを受信したとき
$(window).on(‘message’, function(event){
// クロスサイトリクエストフォージェリ対策（送信元の検証）
if (event.originalEvent.origin != ‘https://form.kintoneapp.com’) return;
var receivemsg = event.originalEvent.data;
if (receivemsg == “移動”) {
// 現在のY座標を取得
var intNowY = document.documentElement.scrollTop || document.body.scrollTop;
// 目的の要素までのY座標距離を取得
var objBounds = document.getElementById(‘child-iframe’).getBoundingClientRect();
// 目的の要素のY座標を取得
var intPageScrollGoalTop = intNowY + objBounds.top;
scroll(objBounds, intPageScrollGoalTop);
}
});
});
</script>
お手数お掛けしました。
非常に助かりました。ありがとうございます。
はじめまして
私もフォーム回答後の完了画面（確認画面の使用はしない）で、親ページの最上部にスクロールさせたいのですがうまくいきません。
親ページはWordPressであるため、なにか必要なことはありますでしょうか？
よろしくおねがいします。
フォームブリッジ側には、以下のコード
(function() {
“use strict”;
//完了画面表示時
fb.events.finish.mounted = [function () {
window.parent.postMessage(“{success: true}”, “*”);
}];
});
WordPress側のheader.phpには以下のコードを入れております
<script type=“text/javascript”>
window.addEventListener(“message”, function(e) {
if(JSON.parse(e.data).success) {
scroll(
0,
document
.querySelector(“iframe[src=‘https://form.kintoneapp.com’]”)
.getBoundingClientRect().top
);
}
});
</script>
Yoshio Fujiwara さん
はじめまして。
親ページの最上部へのスクロールということであれば、以下のコードで移動を確認しました。
window.scrollTo(0,0);
こちらの環境で確認したので、window.addEventListenerの部分に差異はありますが、イベントリスナーの取得が問題ないのであれば
以下のような記載でいかがでしょうか？
========================================================
<script type=“text/javascript”>
window.addEventListener(“message”, function(e) {
window.scrollTo(0,0);
});
</script>
========================================================
また、上記で解決しない場合は、
①ヘッダーへの記載ではなく、ボディー部分への記載
②フォームブリッジのイベントを変更
→fb.events.form.submit イベント
//発生タイミング：フォームから完了画面に移動する前
→fb.events.finish.created イベント
//発生タイミング：完了画面のDOMを作成する前
②はあまり関係ないかもしれませんが、一応何かあるかもしれませんので・・・
明確な回答でなく申し訳ありません。ご参考になれば幸いです。
y-kishiさま
ありがとうございます。
試してみたのですが、動作しませんでした。
ボディー部分の変更については、全体への影響が不明なため実施しておりません。
そこで、別案なのですが完了ページを別のURLで準備しました。
完了画面表示時に親ページもまるごとそのURLへ遷移したいので、以下のように記述してフォームブリッジへアップしましたが、動作しませんでした。
たびたびの質問で恐縮なのですが、ご確認いただけますでしょうか。よろしくおねがいします。
(function() {
“use strict”;
//完了画面表示時
fb.events.finish.created = [function () {
window.top.location.href = “http://www.example.com”;
}];
});
※WordPress側には何も記述しないようにします。
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側(ヘッダー部分)
============================================================
記載なし
============================================================
以上、参考になれば幸いです。
ありがとうございました。
閉じカッコの問題、大変恥ずかしい限りです^^;
社内で検討した結果、完了画面へ遷移するほうになり、そちらでうまく動作させることができました。
本当にありがとうございました。
これからも宜しくお願いします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。