如何用JS等待页面加载后执行函数？及动态页面图片高效获取方案

一、JavaScript中打开网页并等待加载完成后执行函数 #

根据不同使用场景，提供两种常用实现方式：

1. 嵌入iframe加载目标页面 #

适合在当前页面内静默加载外部页面，通过监听load事件触发后续操作：

// 创建并配置iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://bonanzasatrangi.com/products/hv1bn223p6-ochre';
iframe.style.display = 'none';

// 页面加载完成后执行自定义逻辑
iframe.addEventListener('load', () => {
  const imageElements = iframe.contentDocument.querySelectorAll('img');
  const imageUrls = Array.from(imageElements).map(img => img.src);
  console.log('页面图片链接：', imageUrls);
  // 替换为你需要执行的函数
});

// 将iframe添加到当前页面
document.body.appendChild(iframe);

2. 新开窗口加载目标页面 #

如果需要打开独立窗口处理，同样监听load事件，但受同源策略限制，跨域场景下无法访问新窗口的DOM：

const targetWindow = window.open('https://bonanzasatrangi.com/products/hv1bn223p6-ochre');

targetWindow.addEventListener('load', () => {
  // 同源情况下可操作新窗口DOM
  const imageUrls = Array.from(targetWindow.document.querySelectorAll('img')).map(img => img.src);
  console.log(imageUrls);
});

二、Google Sheets获取动态页面图片的高效方案 #

IMPORTXML仅能抓取静态HTML，无法处理JavaScript动态渲染的内容，推荐两种更有效的解决方法：

1. 编写Google Apps Script自定义函数 #

通过脚本模拟请求，若页面依赖JS渲染，可结合Puppeteer（需部署到Cloud Functions）加载完整页面，基础示例：

function getProductImages(url) {
  // 先尝试抓取静态HTML，动态内容未包含则需用Puppeteer
  const response = UrlFetchApp.fetch(url);
  const html = response.getContentText();
  
  // 用Cheerio解析HTML（需先在Apps Script中添加Cheerio库）
  const $ = Cheerio.load(html);
  const imageUrls = [];
  $('img').each((index, element) => {
    const src = $(element).attr('src');
    if (src) imageUrls.push(src);
  });
  
  return imageUrls;
}

若页面完全依赖JS渲染，建议在Cloud Functions部署Puppeteer服务，让其加载完整页面后返回图片数据，再在Apps Script中调用该服务。

2. 直接抓取页面的API接口 #

动态页面的图片通常来自后端API，打开浏览器开发者工具的「网络」面板，筛选XHR/Fetch请求，找到返回产品图片列表的JSON接口，直接在Google Sheets中用IMPORTDATA或UrlFetchApp调用该接口，能直接获取结构化的图片链接，这是效率最高的方式。

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