Q&A
実際のコードをご提示ください。
お世話になります。
フォームの離脱回避のため、beforeunloadでページを離れる際に確認のポップアップが出るようにしています。
http://140.227.39.204/~work260/toiawase/index.html
フォームはiframeで呼び出しています。
http://140.227.39.204/~work260/cgi-bin/toiawase/form.cgi
フォームの送信後、送信完了画面のページに移動します。
http://140.227.39.204/~work260/toiawase/thanks.html
この時、ポップアップが出てしまいます。
ここではポップアップが出ないようにしたいのですがどうすれば実現できるのか方法がわかりません。
ご教授願えないでしょうか。どうぞよろしくお願いいたします。
■参考にしたページ
https://qiita.com/dolaemoso/items/fd05c101e7e190070059
親ページのソースおよびiframe内のソースが下記となります。
親ページのソース
<!DOCTYPE html> <html lang="ja"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <!--中略--> <link rel="stylesheet" href="assets/css/base.css"> <link rel="stylesheet" href="assets/css/form.css"> <link rel="icon" href="http://140.227.39.204/~work260/favicon.ico"> <link rel="apple-touch-icon" href="http://140.227.39.204/~work260/assets/img/apple-touch-icon.png"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body id="page72" class="normal"> <header><!--中略--></header> <main id="wrapper"> <article> <section id="wide"><h2 class="wf4 cbc">お問合せ</h2></section> <section id="contents" class="clearfix"> <div id="mainArea" class="clearfix"> <div id="fbox"> <div class="toiawaseTopBox"><p class="tfLink"><a href="#tel_fax" class="pt">電話をご利用の方はこちら</a></p></div> <div><iframe id="iframe" src="http://140.227.39.204/~work260/cgi-bin/toiawase/form.cgi?trackerId=&siteId="></iframe></div> <a name="tel_fax" id="tel_fax"></a> <div class="tfBox"><dl class="bdt solid bl clearfix"><dt class="wf2 bc2">電話でのお問合せ</dt><dd><div class="fst wf3 tbc"><span class="tit">TEL.</span><a class="number" href="tel:0120-123-456" id="form_tel">0120-123-456</a></div><div class="lst">[営業時間] 10:00～19:00<br>[定休日] 日曜日</div></dd></dl></div> </div> </div> </section> </article> </main> <footer class="wbg bl"> <!--中略--> </footer> <script src="assets/js/jquery.flexnav.js"></script> <script src="assets/js/jquery.smoothScroll.js"></script> <script src="assets/js/lightbox-2.6.min.js"></script> <script src="assets/js/pager.js" defer></script> <script defer> jQuery(document).ready(function($){$(".navi_p").flexNav();}); $(function(){ var topBtn=$('#pageTop'); var obj=$('#iframe'); var tf=$('#tel_fax'); topBtn.hide(); $(window).scroll(function(){if($(this).scrollTop()> 100){topBtn.fadeIn();}else{topBtn.fadeOut();};}); tf.click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); topBtn.click(function(){$('body,html').animate({scrollTop: 0},1000);return false;}); obj.on('load',function(){var off=$('body').offset();$('body,html').animate({scrollTop: off.top,scrollLeft: off.left},0);}); $(window).on("scroll touchmove", function(){ $("#footer_link").stop(); $("#footer_link").css('display', 'none').delay(300).fadeIn(500); }); }); </script> <script> $(function(){ $(window).on('beforeunload', function(){return ""; }); //$('iframe').submit'((window).off('beforeunload');); //$('iframe').on('submit',function(){$(window).off('beforeunload');}); var frm = document.getElementById("iframe"); if(!frm){frm = document.getElementById("contact");} if(frm){ $(window).on('resize', function(){frameHeight();}); $(frm).load(function(){frameHeight();}); } function frameHeight(){$(frm).height(frm.contentWindow.document.body.scrollHeight+100);} }); </script> <script type="text/javascript" src="//webfont.fontplus.jp/accessor/script/fontplus.js?BgLtZoOyUF4%3D&aa=1&ab=2" charset="utf-8"></script> </body> </html>
iframe内のソース（入力画面）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>入力画面</title> <!--中略--> <link rel="stylesheet" href="../css/base.css" type="text/css" /> <script type="text/javascript" src="../js/jquery-2.1.3.js"></script> <script type="text/javascript" src="../js/jquery.autoKana.js"></script> <script type="text/javascript" src="//ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <script type="text/javascript" src="./static/js/form.js"></script> <script> window.onload = function () { document.getElementById("zip").onkeyup = function(){AjaxZip3.zip2addr(this,'','address','address');}; // 姓名 (katakana : true カタカナ / false : ひらがな) $.fn.autoKana( "input[name='name']", "input[name='kana']", {katakana : true}); } </script> </head> <body> <div id="form_box"> <ul id="top_box"> <li class="on"><span class="css3">STEP 1</span><br><span class="pc_txt">必要事項の</span><span class="sp_txt">入力</span></li> <li><span class="css3">STEP 2</span><br><span class="pc_txt">入力内容の</span><span class="sp_txt">確認</span></li> <li class="lst"><span class="css3">STEP 3</span><br><span class="pc_txt">送信</span><span class="sp_txt">完了</span></li> </ul> <div id="form_main"> <form action="/~work260/cgi-bin/toiawase/form.cgi#form_box" method="post"> <input type="hidden" name="pid" value="6357390f8afd27beab7d40cb12efaaf1" /><input type="hidden" name="m" value="cfmsmt" /> <dl><dt><b class="nortice">必須</b><p class="">お問合せ区分</p></dt><dd><label for="type_1"><input type="radio" name="type" id="type_1" value="ご相談" class="radio " /> ご相談</label><label for="type_2"><input type="radio" name="type" id="type_2" value="お見積り" class="radio " /> お見積り</label><label for="type_3"><input type="radio" name="type" id="type_3" value="その他" class="radio " /> その他</label></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">お名前</p></dt><dd><input type="text" name="name" id="name" value="" maxlength="255" style="width:100%" class="text " /></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">フリガナ</p></dt><dd><input type="text" name="kana" id="kana" value="" maxlength="255" style="width:100%" class="text " /></dd></dl> <dl><dt><b class="option">任意</b><p class="">参加日</p></dt><dd><input type="text" name="date" id="date" value="" maxlength="255" style="width:100%" class="text " /></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">郵便番号</p></dt><dd><input type="text" name="zip" id="zip" value="" maxlength="8" style="width:100px" class="text " /></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">ご住所</p></dt><dd><input type="text" name="address" id="address" value="" maxlength="255" style="width:100%" class="text " /></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">E-mail</p></dt><dd><p class="desc">携帯メール可</p><input type="text" name="email" id="email" value="" maxlength="255" style="width:100%" class="text " /></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">電話番号</p></dt><dd><p class="desc">携帯電話も可</p><input type="text" name="tel" id="tel" value="" maxlength="14" style="width:100%" class="text " /></dd></dl> <dl><dt><b class="nortice">必須</b><p class="">お問合せ内容</p></dt><dd><textarea name="comment" id="comment" cols="40" rows="3" class="textarea "></textarea></dd></dl> <div class="btn"><input type="submit" value="確認画面へ" class="submit" /></div> </form> </div> </div> <script type="text/javascript"> $('#date').attr('type','date'); $('#email').attr('type','email'); $('#tel').attr('type','tel'); $('#fax').attr('type','tel'); </script> </body> </html>
iframe内のソース（確認画面）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>メールフォーム：確認画面</title> <!--中略--> <link rel="stylesheet" href="../css/base.css" type="text/css"> <script type="text/javascript" src="./static/js/form.js"></script> </head> <body> <div id="form_box"> <ul id="top_box"> <li><span class="css3">STEP 1</span><br><span class="pc_txt">必要事項の</span><span class="sp_txt">入力</span></li> <li class="on"><span class="css3">STEP 2</span><br><span class="pc_txt">入力内容の</span><span class="sp_txt">確認</span></li> <li class="lst"><span class="css3">STEP 3</span><br><span class="pc_txt">送信</span><span class="sp_txt">完了</span></li> </ul> <p class="art">下記の内容で送信いたします。<br>入力内容に間違いがなければ、下の送信ボタンをクリックしてください。</p> <form action="/~work260/cgi-bin/toiawase/form.cgi" method="post"> <div id="form_main"> <input type="hidden" name="pid" value="e6897872edd8d5f0aff7a057e1e9a34f" /><input type="hidden" name="m" value="cptsmt" /> <dl><dt><b class="nortice">必須</b><p>お問合せ区分</p></dt><dd class="bg_f">ご相談</dd></dl> <dl><dt><b class="nortice">必須</b><p>お名前</p></dt><dd class="bg_f">お名前</dd></dl> <dl><dt><b class="nortice">必須</b><p>フリガナ</p></dt><dd class="bg_f">フリガナ</dd></dl> <dl><dt><b class="option">任意</b><p>参加日</p></dt><dd class="bg_f">2019-08-09</dd></dl> <dl><dt><b class="nortice">必須</b><p>郵便番号</p></dt><dd class="bg_f">6000000</dd></dl> <dl><dt><b class="nortice">必須</b><p>ご住所</p></dt><dd class="bg_f">京都府京都市下京区</dd></dl> <dl><dt><b class="nortice">必須</b><p>E-mail</p></dt><dd class="bg_f">sample@hoge.gom</dd></dl> <dl><dt><b class="nortice">必須</b><p>電話番号</p></dt><dd class="bg_f">09090909090</dd></dl> <dl><dt><b class="nortice">必須</b><p>お問合せ内容</p></dt><dd class="bg_f">お問合せ内容</dd></dl> </div> <p class="comment">※送信完了までに時間がかかる場合がございます。<br>送信完了画面が表示されるまでしばらくお待ちください。</p> <div class="btn"><input type="button" value="戻る" onclick="javascript:document.location.href='http://140.227.39.204/~work260/cgi-bin/toiawase/form.cgi?m=frmshw&pid=e6897872edd8d5f0aff7a057e1e9a34f'" class="submit" /><input type="submit" value="送信" class="submit" /></div> </form> </div> </body> </html>
回答1件
0
ベストアンサー
.off() でイベントハンドラを削除できます。
親では、見えるところに適当な function を用意しておくといいでしょう。postMessage でもいいですが
親
jQuery
1function stopBeforeunload() { 2 $(window).off('beforeunload'); 3}
子
JavaScript
1window.parent.stopBeforeunload();
投稿2019/08/14 02:20
総合スコア13749
お返事遅くなりまして申し訳ありません。
iframe内にスクリプト入れればよかったのですね。
送信完了時にポップアップ出ないようにできました。
ご回答いただきありがとうございます！
あなたの回答
tips
プレビュー
