为何爬取波高时innerHTML数据异常，无法通过BeautifulSoup获取真实值？

问题原因 #

你遇到的情况是因为该网站的波高数据是前端通过JavaScript动态加载的：

• 直接用requests.get获取的是服务器返回的初始HTML，此时真实数值还未被JS渲染填充，所以显示默认的'-'
• 若用Selenium但未等待JS执行完成，同样会抓取到初始状态的占位符

解决方法 #

方法1：直接调用数据接口（推荐） #

通过浏览器开发者工具（F12 → Network → XHR/Fetch）抓包，找到页面加载时获取波高数据的API接口，直接请求接口获取原始JSON数据，效率更高：

1. 打开目标页面，刷新后在Network标签下筛选XHR请求
2. 找到返回波高数据的接口（通常URL包含api、data等关键词）
3. 复制接口URL，模拟浏览器请求头发起请求

示例代码：

import requests

# 替换为实际抓包得到的API接口URL
api_url = "https://waterberichtgeving.rws.nl/wbviewer/api/xxx?loc=HAEW2&set=golf_spectra"
headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36",
    "Referer": "https://waterberichtgeving.rws.nl/wbviewer/maak_grafiek.php?loc=HAEW2&set=golf_spectra&nummer=1&format=wbcharts"
}

response = requests.get(api_url, headers=headers)
if response.status_code == 200:
    data = response.json()
    # 根据接口返回的JSON结构提取对应数据
    hs = data.get("hs")
    tm02 = data.get("tm02")
    print(f"Hs: {hs} cm")
    print(f"TM02: {tm02}")
else:
    print(f"请求失败，状态码：{response.status_code}")

方法2：用Selenium等待JS渲染完成 #

如果必须通过页面解析，需使用Selenium的显式等待，直到真实数据加载完成后再抓取元素：

示例代码：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url = "https://waterberichtgeving.rws.nl/wbviewer/maak_grafiek.php?loc=HAEW2&set=golf_spectra&nummer=1&format=wbcharts"
driver = webdriver.Chrome()  # 需提前安装对应浏览器驱动
driver.get(url)

try:
    # 等待Hs元素的文本不再是'-'，最长等待10秒
    WebDriverWait(driver, 10).until(
        lambda d: d.find_element(By.CSS_SELECTOR, "span[data-key='hs']").text != "-"
    )
    
    # 抓取所有数据单元格并输出
    data_cells = driver.find_elements(By.CLASS_NAME, "dataTableCell")
    for cell in data_cells:
        print(cell.text)
finally:
    driver.quit()

方法3：补充请求头与Cookie #

部分网站会验证请求合法性，若调用接口时返回异常，可：

• 复制浏览器请求头中的User-Agent、Referer等字段加入请求
• 先通过requests.get获取页面Cookie，再携带Cookie请求数据接口

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