为什么此代码杂志示例在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中（仅）失败？

回答

相关问题