JavaScript函數img.onload不返回任何東西（true或false）

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不會返回任何我需要的真或假返回值。

我想在窗體的onsubmit中使用返回值。任何人都可以幫助我嗎？

來源

2016-04-24 king bla

'.onload'是異步這意味着它是被系統調用在未來的任何值一段時間，你從它返回剛剛進入到系統中，不進自己的代碼。 – jfriend00

我試圖使用回調，但它不適合我..但是，我只需要我的代碼的解決方案。如果你能幫助我，我會很棒。謝謝 –

@Oriol - 這不是該帖子的直接副本，因爲該帖子沒有描述如何解決這個特定的問題。是的，它描述了爲什麼你不能通過回調或承諾返回異步回調的結果，但它沒有解釋如何將解決方案應用於異步表單提交。我最初把這個標記爲一個重複的內容，然後在OP的進一步評論中意識到其他答案不能解釋如何解決這個問題，所以我重新打開了它。你應該重新打開。另一篇文章不會爲本OP提供完整的答案。 – jfriend00

一般參考，你應該去閱讀How do I return the response from an asynchronous call?。這描述了獲取異步結果的一般問題。讀完之後，您將希望理解爲什麼您不能僅返回.onload()的值，並期望從getMeta()返回值。但是，這個答案本身並不能爲您的具體問題提供完整的解決方案。因此，現在我們來更詳細地描述一下代碼中發生了什麼，然後討論修復它的一個選項。

img.onload是異步的。這意味着它會在getMeta()已經返回很久之後結束。

同時，你要做到這一點：

onsubmit="return getMeta();"

這使得它看起來像你想使用異步結果來確定表單是否應該提交與否。那根本不能這樣做。異步結果尚未知道，並且您的getMeta()函數始終返回true。

您可以重構您的代碼，使其永遠不會同步提交。您加載圖像，並且只有在加載圖像時，您是否向用戶顯示錯誤或手動提交表單。這有潛在的用戶界面問題，因爲用戶點擊提交按鈕，並沒有立即發生任何事情（因爲你正在加載圖像進行驗證）。這讓用戶不知道發生了什麼。他們通常會認爲它不起作用，或者再次按下提交按鈕或認爲它已被破壞。所以，你通常需要一堆UI才能禁用按鈕，提供反饋意味着你現在正在驗證圖像，然後在圖像不驗證時提供適當的錯誤信息，並且在你的時候應該禁用其他UI控件我們正在驗證圖片，以便用戶在您嘗試決定是否要提交此表單時不會出現其他問題。

因此，修復提交：

在你的onsubmit處理，你會總是返回false這樣的形式永遠不會立即提交。然後，在onload()處理程序中（圖像加載後），您將手動提交表單或顯示錯誤。

來源

2016-04-24 17:01:28 jfriend00

@Oriol - 如果你是downvoter，請重新考慮。您將這個標記爲dup的帖子實際上並沒有告訴OP如何解決他們的特定問題。它確實描述了一些問題，但不是一個完整的解決方案，這就是爲什麼我提供了一個答案，試圖更直接地解決這個特定問題。 – jfriend00

我沒有downvote。我正在考慮是否應該收回我的近距離投票。 – Oriol

@Oriol - 我最初把它作爲同一個問題的一個副本來關閉，但是當我意識到其他答案沒有完全告訴OP如何解決表單提交問題（這是此處的具體問題）時，我改變了主意。我在我的答案中添加了更多關於[dup]（http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call）的信息作爲背景和作爲實際解決方案的貢獻者。 – jfriend00

最後，我找到了類似jfriend00的解決方案，在成功加載圖像時手動提交表單，並通過向「onsubmit」返回false來阻止表單提交出錯。感謝每一個機構

<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;">

來源

2016-04-24 18:36:25

JavaScript函數img.onload不返回任何東西（true或false）

回答

相關問題