Cloudflare Worker使用HTMLRewriter时如何向ElementHandler传参设置元素属性

解决方法 #

你可以通过类的构造函数将外部的邮箱变量传入ElementHandler实例，修改后的完整代码如下：

async function handleRequest(request) {
  // 获取原始请求的响应，修复原代码缺失的response定义问题
  const response = await fetch(request);
  const newResponse = new Response(response.body, response);
  const email = 'test@test.com';
  // 实例化时传入邮箱变量
  return new HTMLRewriter()
     .on("#email", new ElementHandler(email))
     .transform(newResponse);
}

class ElementHandler {
  // 构造函数接收传入的邮箱参数，挂载到实例属性
  constructor(targetEmail) {
    this.targetEmail = targetEmail;
  }
  element(e) {
    e.setAttribute('value', this.targetEmail);
  }
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

调整说明 #

• 给ElementHandler类添加构造函数，接收外部传入的邮箱参数，将其挂载为实例自身的属性
• 实例化ElementHandler时直接把提前定义的email变量作为参数传入即可
• 原示例代码的handleRequest函数中未定义response变量，实际使用时需要先通过await fetch(request)获取原始页面的响应再继续处理。

内容的提问来源于stack exchange，提问作者Chris