页面自适应改写

本示例将展示如何通过Edge Cloud Apps 函数实现页面自适应改写。以下示例代码说明了如何根据访问终端的浏览器类型，对页面内容进行动态改写。如果用户使用的是Chrome浏览器，页面将被改写；对于其他浏览器，页面将保持原样显示。

详细代码

async function handleRequest(request) {
    // 发送原始请求并获取响应
    let response = await fetch(request);
    // 设置自定义响应头
    response.headers.set("X-Version", "petshop-v1");

    // 判断请求是否来自Chrome浏览器，并且响应内容是否为HTML
    if (isFromChrome(request) && isHtml(response)) {
        console.log("rewrite page");

        // 获取响应体文本并进行替换
        let body = await response.text();
        body = body.replace('Make Your Pets Happy', '让您的宠物永远快乐！');
        body = body.replace(
            'Dolore tempor clita lorem rebum kasd eirmod dolore diam eos kasd.',
            '只有用Chrome浏览器访问才会改写\n其他浏览器访问将显示原文'
        );

        // 返回修改后的响应
        return new Response(body, response);
    } else {
        console.log("pass page");
        return response;
    }
}

// 判断请求是否来自Chrome浏览器
function isFromChrome(request) {
    let userAgent = request.headers.get("User-Agent");
    return userAgent && userAgent.toLowerCase().includes("chrome");
}

// 判断响应内容是否为HTML
function isHtml(response) {
    let contentType = response.headers.get("Content-Type");
    return contentType && contentType.toLowerCase().includes("text/html");
}

// 添加Fetch事件监听器，处理传入的请求
addEventListener("fetch", event => {
    event.respondWith(handleRequest(event.request));
});

说明

该示例展示了如何在请求处理过程中，通过检测用户浏览器类型并修改相应的HTML内容，以实现页面自适应功能。页面改写的应用非常广泛，以下是几个成熟的线上场景示例：

• 敏感词审计：自动检测并替换页面中的敏感词。
• 外链改写：动态修改页面中的外部链接地址。
• 全站IPv6协议支持：根据访问者的IP类型，提供适配的内容。