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

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

ただいまの
回答率

87.34%

iframeのフォームで送信ボタンを押した時にbeforeunloadを無効にしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 478

score 3

お世話になります。

フォームの離脱回避のため、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&amp;pid=e6897872edd8d5f0aff7a057e1e9a34f'" class="submit" /><input type="submit" value="送信" class="submit" /></div>
</form>
</div>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/08/08 18:45

    実際のコードをご提示ください。

    キャンセル

回答 1

checkベストアンサー

+1

.off() でイベントハンドラを削除できます。
親では、見えるところに適当な function を用意しておくといいでしょう。postMessage でもいいですが

function stopBeforeunload() {
  $(window).off('beforeunload');
}


window.parent.stopBeforeunload();

https://api.jquery.com/off/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/20 15:31

    お返事遅くなりまして申し訳ありません。
    iframe内にスクリプト入れればよかったのですね。
    送信完了時にポップアップ出ないようにできました。

    ご回答いただきありがとうございます!

    キャンセル

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

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

関連した質問

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