技术问询：如何复制iframe内的src URL、修改并导航至更新后的URL

步骤说明 #

1. 定位目标iframe并获取src属性：通过iframe的类选择器精准定位元素，提取其src属性值。
2. 解析并修改URL：利用浏览器原生的URL对象解析原URL，便捷修改参数或域名等部分。
3. 导航至修改后的URL：调用page.goto()跳转更新后的地址。

完整代码示例 #

// 等待iframe加载完成并可见
await page.locator('iframe.Hkk469u_YqP_JeDapvYp').waitFor({ state: 'visible' });

// 获取iframe的src属性值
const originalIframeSrc = await page.locator('iframe.Hkk469u_YqP_JeDapvYp').getAttribute('src');

// 解析URL并进行修改
const url = new URL(originalIframeSrc);
// 示例1：替换client_process_id参数值
url.searchParams.set('client_process_id', 'your-new-process-id');
// 示例2：修改域名（可选）
// url.hostname = 'new-api.clin.com';
// 示例3：添加新的查询参数
// url.searchParams.append('new_param', 'value');

// 转换为修改后的URL字符串
const modifiedUrl = url.toString();

// 导航至更新后的URL
await page.goto(modifiedUrl);

关键细节 #

• 使用类选择器iframe.Hkk469u_YqP_JeDapvYp避免定位到页面中的其他iframe，确保准确性。
• URL对象提供了标准化的URL操作方法，比直接字符串拼接更安全，能自动处理参数编码等问题。
• 先等待iframe可见再提取属性，避免因元素未加载导致的获取失败。

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