使用 cloudflare 的 workers 在网站</body>前插入 js 怎么写?
byewind · 2022-12-18 19:18:09 +08:00 · 1863 次点击这是一个创建于 742 天前的主题，其中的信息可能已经有所发展或是发生改变。
大家好,我是一个产品设计师,并不会代码. 我的想法是在使用 Framer 制作的网站里插入几段 js 用来优化我的网站. 经过我的探索发现使用 cloudflare 的 workers 可以做到.
但是我不会写代码,看文档则有一大堆不懂,基本要把 JavaScript 语言从零开始学会了才能明白文档的意思. 所以来求助,目标就是在网页的</body>前,在<body>标签的所有内容后插入几段 js.
因为需要插入的 js 需要查找网站生成后的样式名来起作用.
我的网站地址: https://snow.byewind.com/
另外我的产品很不错,但是缺乏流量, 在外网粉丝多的朋友可以帮我分销,我会提供高于产品价格 50%的分销费用.
28 条回复 • 2024-05-11 17:34:06 +08:00
 |
1
0o0O0o0O0o 2022-12-18 19:22:52 +08:00
> 把 JavaScript 语言从零开始学会了才能明白文档的意思
不需要读懂太多，用它的 HTMLRewriter 即可 https://developers.cloudflare.com/workers/examples/rewrite-links/ |
 |
2
byewind OP 下方是我现在使用的 Workers 用来将软件域名换成我自己域名的, 如果有谁内帮我把代码写出来加到我现有的代码内就更好了.
我不是学不会, 而是不想花太多的时间. 我要珍惜我的时间用在产品设计上. 所以来求助的目的就是想节约时间. 而对于懂的人来说只要 3 分钟就能帮到我. 而我学习需要花上至少 3 天时间.对吧 // 反向代理 Workers // https://senjianlu.com/2021/12/cloudflare-workers-image/ addEventListener("fetch", event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { // Cloudflare Workers 分配的域名 cf_worker_host = "framer.yuansite.workers.dev"; // 自定义的域名 customize_host = "snow.byewind.com"; // 原地址 origin_host = "snowui.framer.website"; // 替换 2 次以同时兼容 Worker 来源和域名来源 url = request.url.replace(cf_worker_host, origin_host).replace(customize_host, origin_host); return fetch(url); } |
|
3
byewind OP @0o0O0o0O0o 这个是改写 URL 呢, 我是想要在 HTML 里插入 js 代码
|
|
4
0o0O0o0O0o 2022-12-18 19:38:22 +08:00
async function handleRequest(req) {
const res = await fetch(req); const contentType = res.headers.get("Content-Type"); // If the response is HTML, it can be transformed with // HTMLRewriter -- otherwise, it should pass through if (contentType.startsWith("text/html")) { return rewriter.transform(res); } else { return res; } } class Handler { element(element) { element.append(`<script>alert(1)</script>`, { html: true }); } } const rewriter = new HTMLRewriter().on("body", new Handler()); addEventListener("fetch", (event) => { event.respondWith(handleRequest(event.request)); }); |
|
5
0o0O0o0O0o 2022-12-18 19:39:29 +08:00
script 标签中间的就是 JS 代码，你改动它就行了
|
|
6
byewind OP 404 Not Found
alt-svc:h3=":443"; ma=86400, h3-29=":443"; ma=86400 cache-control:private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0 cf-ray:77b7b84b484e22ca-ORD content-length:16 content-type:text/plain; charset=UTF-8 date:Sun, 18 Dec 2022 11:57:15 GMT expires:Thu, 01 Jan 1970 00:00:01 GMT nel:{"success_fraction":0,"report_to":"cf-nel","max_age":604800} referrer-policy:same-origin report-to:{"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=i23yRkJa1D02wHxx0aj8BiPtuJBp%2FE49nl%2B7MnaI0AbMIfsablDv1D%2FOwXtbCckUJF7FrdmFd4v4YIv0MoKR%2FCN7QY2Di63gKRYsc0axNBhzy%2B9ZZvkc5w04EM5Wrn6%2FOK0VqJzuXHF4Rh8s"}],"group":"cf-nel","max_age":604800} server:cloudflare vary:Accept-Encoding x-frame-options:SAMEORIGIN error code: 1042 |
|
7
byewind OP 应该是哪里搞错了,这里没办法贴图啊
|
|
8
byewind OP 还在吗?
|
|
9
byewind OP 其实我想要的应该几行代码就可以写出来. 逻辑就是
1. 找到</body>标签 2. 在其前面插入所需要的内容. |
|
10
byewind OP 或者将我之前的 worker 结合进去就是
1. 将原本的网址 aaa 换成 bbb 2. 将网站内所有的网址中的 aaa 都换成 bbb 3. 找到</body>标签 4. 在其前面插入所需要的内容. |
 |
11
cha0sCat 2022-12-19 05:28:31 +08:00
对于理解代码的人，使用 HTMLRewriter 可能会更优雅。
但是对于不懂代码的人，还是简单粗暴来的更有效。 ```js addEventListener("fetch", event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { // Cloudflare Workers 分配的域名 const cf_worker_host = "icy-snowflake-f4de.ikoa.workers.dev"; // 自定义的域名 const customize_host = "snow.byewind.com"; // 原地址 const origin_host = "snowui.framer.website"; // 替换 2 次以同时兼容 Worker 来源和域名来源 const url = request.url .replace(cf_worker_host, origin_host) .replace(customize_host, origin_host); const originalResponse = await fetch(url); if (originalResponse.headers.get('Content-Type') === 'text/html') { const rewritedContent = await originalResponse.text().then(text => { return text.replace('</body>', '<script>alert("dev")</script></body>'); }); return new Response(rewritedContent, originalResponse) } else { return originalResponse } } ``` |
|
12
cha0sCat 2022-12-19 05:29:55 +08:00
代码里 cf_worker_host 我写错了，楼主自己替换一下
|
|
13
byewind OP @cha0sCat 成功了, 不过自定义 js 部分好像不能换行, 一换行就出错了. 不过非常感谢你的帮助. 这是我测试的地址: https://test.byewind.com/
|
|
14
byewind OP 然后我又有了新需求, 我想把 Made in Framer 用 CSS 给彻底干掉, 这时候又该怎么写呢?
|
|
15
byewind OP @byewind 我已经用 css 干掉它了. 现在的问题是不能针对<body>用 js 代码, 这个应该和 Framer 生成的页面有关,在本地是可以的, 烦恼
|
|
16
byewind OP |
|
17
byewind OP 现在非常好奇这些 js 的作者是怎么把飞鸟模拟得这么好的
|
|
18
byewind OP @cha0sCat HI 你的这段代码好像还有些问题, 比如我能访问 byewind.com, 但是 byewind.com/about 这样的子页面直接访问就出问题了.这样应该怎么解决呢?
addEventListener("fetch", event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { // 目标地址 const target_host = "byewind.framer.website"; // 原地址 const original_host_a = "byewind.com"; const original_host_b = "www.byewind.com"; const original_host_c = "byewind.yuansite.workers.dev"; // 替换 2 次以同时兼容 Worker 来源和域名来源 const url = request.url .replace(original_host_c, target_host) .replace(original_host_b, target_host) .replace(original_host_a, target_host); const originalResponse = await fetch(url); if (originalResponse.headers.get('Content-Type') === 'text/html') { const rewritedContent = await originalResponse.text().then(text => { // 在这插入自定义代码, 用样式去除 body 的滚动条, 隐藏 Framer 的 logo.添加 JS 动效 return text.replace('</body>', '<style type="text/css"> .__framer-badge {pointer-events: auto; display: none !important;} ::-webkit-scrollbar {display: none;} body {scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden;overflow-y: auto;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script><script>VANTA.BIRDS({el: "#main",mouseControls: true,touchControls: true,gyroControls: false,minHeight: 200.00,minWidth: 200.00,scale: 1.00,scaleMobile: 1.00,backgroundColor: 0x0,color1: 0x521efc,color2: 0x14ffc7,colorMode: "lerp",wingSpan: 40.00,speedLimit: 10.00,separation: 100.00,alignment: 100.00,cohesion: 100.00})</script></body>'); }); return new Response(rewritedContent, originalResponse) } else { return originalResponse } } |
|
20
cha0sCat 2022-12-25 08:31:41 +08:00 via iPhone
没截图、没日志、没报错信息
就一句“出问题了”我解决不了 |
 |
21
OkotoO 2022-12-25 11:18:19 +08:00 via Android
@byewind 看看路由是不是只匹配了根目录，如果是的话改成 test.brewing.com/* 再试试看
|
|
22
byewind OP @cha0sCat 不知道在哪里可以看到报错, 在 worker 中是没有出现错误的. 理想的脚本运行效果应该是打开 byewind.com 的网址都能对应到 byewind.framer.website 网址里的内容. 可是现在 /后的域名会出问题.可以用 byewind.com/about 这个地址来看出问题的页面, 这个地址应该显示的内容是 byewind.framer.website/about
|
|
23
byewind OP @OkotoO 路由的部分 *.byewind.com/* , byewind.com/* 这两个地址我都匹配了这个 worker, 应该没有问题的. 这里不能发图片啊
|
|
24
byewind OP 方便的话在 twitter 上私信我? 我的 twitter 是 https://twitter.com/FarewelltoWind
|
|
27
byewind OP 具体的实现方法和用到的素材我都放在这个文档里, 有兴趣的朋友可以研究研究, 解决下目前还存在的问题.
https://byewind.notion.site/Cloudflare-Workers-Framer-8e1b5a09b4d448c2ad1d6c74b5ed3d21 |
 |
28
Helsin 232 天前
你都用 cloudflare 了，直接用 Zaraz 的 Custom HTML 就行了
|
Select Language