Puppeteer注入自定义HTML时如何设置当前URL使相对链接正常解析？

有两种无需触发页面跳转即可解决相对链接失效的方案，可根据你的使用场景选择：

方案1：直接修改页面URL（修改地址栏显示） #

调用history.replaceState方法即可在不刷新、不跳转的前提下修改当前about:blank页面的URL，修改后相对链接会自动以新URL为基准解析：

// 参数说明：
// 1. 自定义状态对象，可存储任意需要关联的页面数据
// 2. 页面标题，当前多数浏览器会忽略该参数，可留空
// 3. 目标URL，必须和打开空白页的父页面同源，否则会触发同源策略报错
history.replaceState({}, '', 'https://你预期的根域名/对应页面路径/');

注意：如果是通过window.open打开的子空白页，需要在子页面的上下文下调用该方法，或者通过newPage.history.replaceState调用。

方案2：指定相对路径基准（不修改地址栏URL，更推荐新建页面场景） #

如果不需要修改地址栏的about:blank显示，只需要修复相对链接解析逻辑，可以在注入页面内容前先插入<base>标签指定所有相对路径的基准地址：

const newTab = window.open('about:blank');
// 先写入base标签，指定相对路径的基准
newTab.document.write(`<base href="https://你预期的基准路径前缀/">`);
// 再写入你自定义的页面内容
newTab.document.write(`你的自定义页面代码`);
newTab.document.close();

该方案不需要修改地址栏URL，所有相对链接、静态资源路径都会自动以<base>标签的href属性为基准解析，完全规避相对链接失效问题。

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