如何为网页嵌入的网速测试自动填充文本输入框？

问题描述 #

我在自有网站部署了OpenSpeedTest提供的可嵌入HTML5网速测试组件，但该工具没有API来获取测试结果并自动填充文本字段。尝试用JavaScript访问iframe内容时，因为跨域被阻止了。Speedtest Ookla也不再提供可用API实现此功能，不知道还有什么其他方案。

尝试的代码：

function getSpeedTestResults() {
    // 尝试访问iframe内容
    let iframe = document.getElementById('speedtest');
    let iframeContent = iframe.contentDocument || iframe.contentWindow.document;

    // 尝试获取iframe内的测试结果（大概率会被跨域阻止）
    let downloadSpeed = iframeContent.getElementById('downResult').textContent;
    let uploadSpeed = iframeContent.getElementById('upRestxt').textContent;
    let ping = iframeContent.getElementById('pingResult').textContent;

    // 填充表单字段
    document.getElementById('download').value = downloadSpeed;
    document.getElementById('upload').value = uploadSpeed;
    document.getElementById('ping').value = ping;
}

可行解决方案 #

方案1：自托管OpenSpeedTest并修改源码 #

如果你是自己部署OpenSpeedTest服务（不是用官方公共iframe链接），直接改源码添加结果回调是最可靠的方式：

1. 找到OpenSpeedTest中测试完成的触发逻辑，在结果生成后添加postMessage向父页面发送数据
2. 父页面监听message事件接收数据，再填充表单

子页面（修改后的OpenSpeedTest代码）

// 在测试完成的函数里添加以下代码
function onTestFinish(downloadVal, uploadVal, pingVal) {
    // 保留原有显示结果的代码
    // 向父页面发送结果，建议把*替换成你的网站域名，提升安全性
    window.parent.postMessage({
        type: 'speedtest-result',
        download: downloadVal,
        upload: uploadVal,
        ping: pingVal
    }, '*');
}

父页面代码

// 监听跨域消息
window.addEventListener('message', function(event) {
    // 验证消息来源，防止恶意数据
    if (event.origin !== 'https://your-ops-host.com') return; // 替换成你自托管的OpenSpeedTest域名
    if (event.data.type === 'speedtest-result') {
        // 填充表单
        document.getElementById('download').value = event.data.download;
        document.getElementById('upload').value = event.data.upload;
        document.getElementById('ping').value = event.data.ping;
    }
});

方案2：替换为开源测速库直接集成 #

放弃iframe嵌入，选择纯前端或前后端结合的开源测速库，从根本上避免跨域问题：

• 比如前端纯JS库libspeedtest，可以直接在页面中调用，测试完成后直接拿到结果
• 或者Node.js库speedtest-net，配合后端接口实现测速，前端调用接口获取结果

示例（libspeedtest前端集成）

// 引入libspeedtest库后执行
const speedTest = new SpeedTest();
// 监听结果事件
speedTest.on('result', function(result) {
    document.getElementById('download').value = result.download;
    document.getElementById('upload').value = result.upload;
    document.getElementById('ping').value = result.ping;
});
// 开始测速
speedTest.start();

方案3：截图OCR识别（应急备选） #

如果以上方案都无法实施，作为最后手段，可以用截图+OCR识别结果，但稳定性差，受页面样式影响大：

1. 用html2canvas截取iframe中的结果区域
2. 用tesseract.js识别截图中的文本
3. 解析文本提取测速值并填充表单

// 需提前引入html2canvas和tesseract.js
async function extractSpeedResults() {
    const iframe = document.getElementById('speedtest');
    // 截取iframe内容为canvas
    const canvas = await html2canvas(iframe);
    // 初始化OCR worker
    const worker = await Tesseract.createWorker('eng');
    // 识别文本
    const { data: { text } } = await worker.recognize(canvas);
    // 正则匹配提取结果（需根据实际显示文本调整正则）
    const download = text.match(/Download:\s*(\d+\.?\d*)\s*Mbps/)?.[1];
    const upload = text.match(/Upload:\s*(\d+\.?\d*)\s*Mbps/)?.[1];
    const ping = text.match(/Ping:\s*(\d+\.?\d*)\s*ms/)?.[1];
    // 填充表单
    if (download) document.getElementById('download').value = download;
    if (upload) document.getElementById('upload').value = upload;
    if (ping) document.getElementById('ping').value = ping;
    // 终止OCR worker
    await worker.terminate();
}

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