如何用BeautifulSoup抓取JavaScript动态生成的网页内容？

BeautifulSoup无法直接抓取JavaScript动态生成的内容
因为BeautifulSoup只能解析服务器返回的静态HTML源码，你在开发者工具中看到的<h2 data-v-a4f7566c="" class="name">Racio lky sýrové</h2>是页面加载完成后通过JavaScript动态渲染生成的，这类元素不会出现在初始请求得到的HTML源码里，所以用BeautifulSoup直接解析会返回空结果。

可行的解决办法 #

• 使用浏览器自动化工具：比如Selenium、Playwright，这类工具可以模拟真实浏览器的行为，等待页面JavaScript渲染完成后，再获取完整的页面HTML，之后再用BeautifulSoup解析。
  举个Selenium的简单示例：

  from selenium import webdriver
  from bs4 import BeautifulSoup
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  # 初始化浏览器驱动（需提前下载对应浏览器的驱动）
  driver = webdriver.Chrome()
  driver.get("https://www.kosik.cz/c1026-pekarna-a-cukrarna")
  
  # 等待目标元素加载完成
  try:
      WebDriverWait(driver, 10).until(
          EC.presence_of_element_located((By.CLASS_NAME, "name"))
      )
      # 获取渲染后的页面源码
      page_source = driver.page_source
      soup = BeautifulSoup(page_source, "html.parser")
      # 提取目标文本
      target_text = soup.find("h2", class_="name").text
      print(target_text)
  finally:
      driver.quit()
  

• 直接抓取后端API接口：打开浏览器开发者工具的「Network」面板，筛选「XHR/Fetch」类型请求，找到加载商品数据的API接口，直接向该接口发送请求，获取JSON格式的原始数据，这种方式不需要处理HTML，效率更高。

• 提取页面内嵌的JSON数据：部分网站会把动态渲染所需的数据内嵌在页面的<script>标签中（比如window.__INITIAL_STATE__这类变量），可以用BeautifulSoup提取<script>标签内容，再用JSON解析工具提取目标数据。

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