Question

我正在为文本编辑器编写WebExtension。当用户单击按钮时，format编辑器将触发ajax请求，然后返回格式化文本。我需要我的插件来监听textarea中的更改。

我已尝试使用onchange或oninput，但收到回复后，未触发。 ajax响应使用此函数设置正文（不是我自己的）：

function setBody(text) { $(opts.codeEl).val(text); // opts.codeEl is the textarea in question }

ajax响应如下所示：

{"Body":"Hello World","Error":""}

是否可以从 WebExtension 内容脚本处理此ajax请求/响应？以某种方式听取 DOM 中val textarea的变化？我可以收听并拦截回复吗？

ajax请求正在网站的javascript代码中发送和接收，隔离来自我使用的内容脚本（编辑的WebExtension代码）。请求就是这个

function fmt() { loading(); var data = {"body": body()}; if ($(opts.fmtImportEl).is(":checked")) { data["imports"] = "true"; } $.ajax("/fmt", { data: data, type: "POST", dataType: "json", success: function(data) { if (data.Error) { setError(data.Error); } else { setBody(data.Body); setError(""); } } }); }

修改

注入ajaxComplete处理程序：

$(document).ajaxComplete(function(event, jqxhr, options) { if(options.url === "/fmt") { console.log("fmtted"); $('#code').change(); } });

收到ajax响应时，将调用目标站点标题。但是，在尝试使用注入的脚本修改DOM时（例如，通过调用change()或onchange()，出于安全原因，它会引发Error: Permission denied to access property "apply"错误。

Answer 1

jQuery .val(value)会调度change事件。致电.change()或.trigger("change")。

如果您不知道何时会调用setBody，则可以.ajaxStop()使用.change()在$(opts.codeEl)上一次$.ajax()来电时致电<{1}}。

＆＃13;

$(function() {

  let opts = {
    codeEl: document.querySelector("textarea")
  }

  $(opts.codeEl).on("change", function(event) {
    console.log("changed")
  });

  function setBody(text) {
    $(opts.codeEl).val(text)
  }

  let url = URL.createObjectURL(
    new Blob([
      JSON.stringify({
        "Body": "Hello World",
        "Error": ""
      })
    ], {
      type: "application/json"
    })
  );

  $.get(url)
  .then(function(data) {
    URL.revokeObjectURL(url);
    setBody(JSON.stringify(data))
  });
  
  $(document).ajaxComplete(function(event, jqxhr, options) {
    if (options.url === url) {
      console.log("ajaxStop");
      $(opts.codeEl).change(); // trigger `change` event
    }
    
  });

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<textarea></textarea>

＆＃13;

在内容脚本中监听AJAX响应何时更改textarea val

修改

1 个答案: