Question

我从this Code Magazine article下载了示例代码。这是在html表单中单击提交按钮时的进度指示器。它适用于Firefox和IE，但在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;
}

Answer 1

这可能与Content Security Policy for Google Chrome（如果您启用了扩展程序）相关，这可能会禁用内联事件，例如onclick。

除此之外，代码不会将元素还原为Save，因为您还没有告诉它。

方法细分：

$（ctl）将引用按钮

您禁用它
您将文本设置为＆＃34; Saving＆＃34;
你从...回来功能

您没有告诉它将文本重置为＆＃34;保存＆＃34;

如果更改代码结构，它具有完全相同的行为

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/

为什么此Code Magazine示例在Chrome中失败（仅限）？

1 个答案: