爲什麼此代碼雜誌示例在Chrome中（僅）失敗？

我從this Code Magazine article下載了示例代碼。這是在HTML表單內單擊提交按鈕時的進度指示器。它適用於Firefox和IE，但在Chrome中提交從未完成。按鈕文本從「保存」更改爲「保存...」，並且永遠不會還原爲「保存」。出於某種原因，表單從未發佈。這裏的提交按鈕：爲什麼此代碼雜誌示例在Chrome中（僅）失敗？

<button type="submit" id="submitButton" class="btn btn-primary" onclick="return DisplayProgressMessage(this, 'Saving...');"> 
    Save 
</button>

而這裏的腳本：

<script> 
    function DisplayProgressMessage(ctl, msg) { 
     $(ctl).prop("disabled", true); 
     $(ctl).text(msg); 

     return true; 
}

來源

2016-08-11 DeveloperDan

這可能涉及到Content Security Policy for Google Chrome（如果啓用了擴展），這可能會禁用內聯的事件，如onclick。

除此之外，代碼不會將元素還原回Save，因爲您沒有告訴它。

擊穿方法：

$（CTL）將參照按鈕

禁用它
你設置爲「保存」
您從返回文本功能

你d on't告訴它文本重置回「保存」

，如果你改變代碼結構

var $button = $("#submitButton"); 

$button.on("click", function() { 
    DisplayProgressMessage(this, "saving..."); 
}); 

function DisplayProgressMessage(ctl, msg) { 
    $(ctl).prop("disabled", true); 
    $(ctl).text(msg); 

    return true; 
}

https://jsfiddle.net/xzq701r9/

來源

2016-08-11 20:10:20

由於它具有完全相同的行爲。我將研究內容安全策略。我相信我已經準確地複製了文章中的代碼。根據您的描述和jsfiddle，現在我感到驚訝，它可以在Firefox和Chrome中使用。 – DeveloperDan

我已經澄清了我的問題，指出提交按鈕處於窗體中。單詞「保存」應顯示後。我相信內容安全策略導致了這個問題。 – DeveloperDan

爲什麼此代碼雜誌示例在Chrome中（僅）失敗？

回答

相關問題