2015/08/04

onsubmit="return false"にしているのにsubmitされてしまう

photo by Alex Proimos

Chrome Extensions(拡張機能)を開発しているときに、submitの無効化でつまづいたのでまとめておく。

submitが無効化できない


Extensions用のページで<form onsubmit=”return false;”>と書いているのに、なぜかページが更新されてしまった。

3時間くらい悩んで、コンソールに一瞬だけエラーが表示されていることに気づいた。
エラー内容は次のようなもの。

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash('sha256-....'), or a nonce ('nonce-...') is required to enabled inline execution.

インラインでJavaScript書いちゃダメだよ!というエラー。

Chrome Extensionsは、HTMLに<script type="text/javascript"></script>とか<form onsubmit=”return false;”>とは書かずに、すべて外部ファイルにまとめなければならない。




submitを無効化する方法


document.getElementById('hoge-form').addEventListener('submit', function(event) {
    event.preventDefault();
}, false);

このようなsubmitを無効化する処理を外部ファイルに書き、HTMLで<script src=”hoge.js”></script>のように読み込む必要がある。



参考サイト




以上

written by @bc_rikko

0 件のコメント :

コメントを投稿