javascript - 使用 Cloudflare worker 注入(inject) HTML

标签 javascript html cloudflare-workers

我正在尝试使用 HTMLRewriter 注入(inject)预加载 <link>进入我网站上的网页,但没有任何反应。

我使用的代码是:

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
});

class ElementHandler {
  element(element) {
    element.append(`<link rel="preload" href="path/to/image.jpg" as="image">`, {html: true});
  }
}

async function handleRequest(req) {
  const res = await fetch(req)
  return new HTMLRewriter().on("head", new ElementHandler()).transform(res)
}

我和 Cloudflare 的人谈过,他们看不出有什么问题,但它仍然无法正常工作。 <link > 不存在。

最佳答案

确保您要到达的路线已在您的路线部分中设置。路线部分可以在您的域 > 工作人员 > 添加路线下找到

我希望我可以发布一张图片,但这是我使用您的代码片段编写的指南,用于将样式注入(inject)名为 FoundryVTT 的应用程序:https://dev.to/mbround18/how-to-hijack-your-head-38dn

关于javascript - 使用 Cloudflare worker 注入(inject) HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68161234/

相关文章:

javascript - 贪吃蛇游戏 : how to check if the head collides with its own body

javascript - Bootstrap 3 的轮播不起作用

html - 用固定空间对齐元素(可变宽度)

javascript - 如何使用 node.js 和 cloudflare worker 在现有 HTML 响应中注入(inject) javascript

javascript - 通过 Stripe 向用户收费并将资金存入另一个用户帐户

javascript - 将焦点移至下一个 "li"元素,忽略所有嵌套元素

javascript - 如何在 Mootools 中获取 div 的位置?

distributed-computing - 在 Cloudflare Workers KV 等分布式数据存储中存储 ReadableStream 的用例有哪些?

vue.js - 在 cloudflare workers 上运行 vue3 ssr

Javascript HTML5 音频 - 如果已经播放,不播放声音?