JavaScript関数img.onloadは

Question

function getMeta() { 
 
    var img = new Image(); 
 
    var verif = true; 
 
    img.onload = function() { 
 
    if (this.width != 468 && this.height != 60) { 
 
     alert('error : only these image sizes are accepted : 468x60'); 
 
     return false; 
 
    } else 
 
     alert('loaded successfully'); 
 
    }; 
 
    img.onerror = function() { 
 
    alert('error : this is not a valid image'); 
 
    return false; 
 
    }; 
 
    img.src = document.getElementById('t1').value; 
 
    return true; 
 
}

<form action="https://www.paypal.com/cgi-bin/webscr" 
 
     method="post" target="_blank" id="form1" 
 
     onsubmit="return getMeta();">

機能img.onload私は真または偽の戻り値を必要とするもの を返さない（trueまたはfalse）何も返しません。

フォームのonsubmitで戻り値を使用します。 誰でも助けてくれますか？

Answer 1

一般的な参照のために、How do I return the response from an asynchronous call?を読む必要があります。これは、非同期の結果を得る一般的な問題を説明しています。それを読んだら、なぜ.onload()から値を返すだけで、それが返り値getMeta()であると期待できないのか、うまく理解できます。しかし、その答えだけでは、あなたの特定の問題を完全に解決することはできません。

コードで何が起こっているのかをもう少し詳しく説明し、それを修正するためのオプションについて話し合うことができます。

img.onloadは非同期です。これは、すでにgetMeta()が返されてからしばらくして終了することを意味します。

一方、あなたはこれを行うにしようとしている：あなたは、フォームが提出すべきか否かを判断するために非同期の結果を使用しようとしているように見えます

onsubmit="return getMeta();" 

を。それは単にそのようにすることはできません。非同期の結果はまだ不明で、getMeta()関数は常にtrueを返します。

コードを同期して送信しないように再構成することができます。イメージを読み込み、イメージが読み込まれたときにのみ、エラーをユーザーに表示するか、手動でフォームを送信します。これは、ユーザーが送信ボタンを押してすぐに何も起こらないためです（検証する画像をロードしているため）。これにより、ユーザーは何が起こっているのか不思議に思う。彼らはしばしばそれが動作しないと思うし、送信ボタンをもう一度押すか、ちょうど壊れていると思うでしょう。このため、通常、ボタンを無効にしたり、画像を確認していることをフィードバックしたり、画像が確認されずに他のUIコントロールを無効にする必要がある場合は、適切なエラーメッセージを表示したりする必要がありますあなたがこのフォームを提出するかどうかを決定しようとしている間に、ユーザーが外出したり他のことをしないように画像を確認しています。

ので、提出修正する：

あなたのonSubmitハンドラでは、あなたは常にfalseを返しますので、フォームがすぐに提出することはありません。次に、onload()ハンドラ（イメージがロードされた後）で、手動でフォームを送信するか、エラーを表示します。

Answer 2

最後に、イメージが正常に読み込まれたときに手動でフォームを送信し、エラー時にフォームの送信をブロックするために "onsubmit"にfalseを追加することで、jfriend00のようなソリューションが見つかりました。おかげで、すべてのボディ

<script> 
 
function getMeta(){ 
 
    var img = new Image(); 
 
    img.onload = function(){ 
 
     if (this.width != 468 && this.height != 60) 
 
\t \t {alert('error : only these image sizes are accepted : 468x60'); 
 
\t \t return false;} 
 
\t \t 
 
\t \t else 
 
\t \t alert('loaded successfully'); 
 
\t \t document.getElementById('form1').submit(); 
 
    }; 
 
\t img.onerror = function() {alert('error : this is not a valid image'); 
 
\t return false; 
 
\t }; 
 
    img.src = document.getElementById('t1').value; 
 
\t return true; 
 
} 
 
</script>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="form1" onsubmit="getMeta(); return false;">