JavaScript

運用している WEBサイトでフォームからの投稿ボタンやリセットボタンをダブルクリックされての不具合が頻発したので対策を施した。

スマホ端末のユーザーは問題ないのだが、PC環境でダブルクリックの癖が抜けない人が居るらしい。

参考にしたサイトは下記…というかそのまんまである。

参照にしたTips

JS本体

var dblClickFlag = null;

function ThroughDblClick() {
    // ダブルクリック（連続ポスト）の制御
    if (dblClickFlag == null) {
        dblClickFlag = 1;
        return true;
    } else {
        return false;
    }
}

onSubmitから呼び出す

<script>
var dblClickFlag = null;

function ThroughDblClick() {
    // ダブルクリック（連続ポスト）の制御
    if (dblClickFlag == null) {
        dblClickFlag = 1;
        return true;
    } else {
        return false;
    }
}
</script>

<form action="" method="post" onSubmit="return ThroughDblClick();">
   <input type="submit" value="送信">
</form>

2回目以降がFalseになるかをテスト

test.html に下記をコピペしてテストしてみる。

<script>
var dblClickFlag = null;

function ThroughDblClick() {
    console.log(dblClickFlag == null);
    // ダブルクリック（連続ポスト）の制御
    if (dblClickFlag == null) {
        dblClickFlag = 1;
        return true;
    } else {
        return false;
    }
}
</script>

<form action="" method="post" onSubmit="return ThroughDblClick();">
   <input type="submit" value="送信">
   <input type="button" value="test" onclick="ThroughDblClick();">
</form>

Chromeで test.html ファイルを表示させてデベロッパーツールを起動
testボタンをダブルクリック
Consoleタブで 1度目 true / 2度目以降 false となることを確認できればOK

レスポンシブ Webデザインでは、iframeの高さが PCとスマホ・タブレットで結構変わってしまうことも多くて事前に高さを決め打ちで指定できません。

そこで、JavaScript（jQuery）を使って iframeの高さを自動的に設定してくれるスクリプトを探しました。

親ページと子ページのそれぞれで設定の必要な Tipsが多い中、親ページの設定のみで動作するものを見つけて試したところ実に快適だったのでこのスクリプトを採用することにした。

HTMLで準備すること

高さを自動調整したい iframeの classに「autoHeight」を付けるだけです。

<iframe src="http://www.example.com/" class="autoHeight"></iframe>

iframeの高さを自動的に調整してくれるスクリプト

jQueryを読み込んだ状態で以下のスクリプトを実行します。

(function(window, $){
	$(window).on("load",function(){
		$('iframe.autoHeight').each(function(){
			var D = $(this).get(0).contentWindow.document;
			var innerHeight = Math.max(
				D.body.scrollHeight, D.documentElement.scrollHeight,
				D.body.offsetHeight, D.documentElement.offsetHeight,
				D.body.clientHeight, D.documentElement.clientHeight
				);
			$(this).removeAttr("height").css('height', innerHeight + 'px');
		});
	});
})(window, jQuery);

ページに配置された画像などの読み込みが完了した時点で iframeの高さを調整します。

同じページ内に複数の iframeがあっても、正常に高さを設定できます。

class="autoHeight" と書くだけで scrolling="no" frameborder="no" とかを書く必要なくとてもシンプルな優れものでした。

参考サイト

【 jQuery】 iframeの高さを取得し自動調整するスクリプト（Microsoft Edgeにも対応）