获取URL页面innerHTML时遇window未定义错误的解决方法

嘿，这个错误其实很好定位——你写的代码是基于浏览器环境的，但现在它跑在了非浏览器环境（比如Node.js）里！window是浏览器专属的全局对象，Node.js根本没有这个东西，所以才会抛出ReferenceError。另外你的代码还有几个小问题，我一起帮你搞定：

先明确你的运行环境 #

情况1：你是想在浏览器里运行代码 #

首先，原代码里的if (!window.XMLHttpRequest) return;判断现在几乎没用了——现代浏览器100%支持XMLHttpRequest，完全可以删掉。另外你在回调里犯了两个错：

• root是未定义的变量，你得写成具体的选择器，比如#root或者.root
• 你用了当前页面的document来查询元素，但你应该从请求返回的response文档里找目标元素啊！

修正后的浏览器环境代码：

var getHTML = function (url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    if (callback && typeof(callback) === 'function') {
      // 把请求到的外部文档传给回调
      callback(this.responseXML);
    }
  }
  xhr.open('GET', url);
  xhr.responseType = 'document';
  xhr.send();
}

getHTML('http://www.example.com/page', (response) => {
  // 替换成你实际要抓取的元素选择器
  const targetElement = response.querySelector('#root');
  if (targetElement) {
    const pageContents = targetElement.innerHTML;
    console.log('抓取到的内容:', pageContents);
    // 这里可以处理内容，比如插入到当前页面
  } else {
    console.log('找不到目标元素，请检查选择器是否正确');
  }
})

⚠️ 注意：如果浏览器里运行还是报错，大概率是跨域问题——浏览器的同源策略会阻止你从不同域名获取内容。这时候需要目标网站配置了CORS允许跨域，或者你得用后端代理来转发请求。

情况2：你是在Node.js环境里运行代码 #

Node.js没有window和XMLHttpRequest，所以得用Node生态里的工具来实现。推荐用axios发HTTP请求，cheerio来解析HTML（语法和浏览器DOM几乎一样）：

1. 先安装依赖：

npm install axios cheerio

2. 修正后的Node.js代码：

const axios = require('axios');
const cheerio = require('cheerio');

// 用async/await让代码更简洁
async function getHTML(url) {
  try {
    // 发送GET请求获取HTML内容
    const response = await axios.get(url);
    // 加载HTML到cheerio，得到类似jQuery的$对象
    const $ = cheerio.load(response.data);
    // 替换成你要抓取的元素选择器
    const pageContents = $('#root').html();
    console.log('抓取到的内容:', pageContents);
    return pageContents;
  } catch (error) {
    console.error('请求或解析出错了:', error.message);
  }
}

// 调用函数
getHTML('http://www.example.com/page');

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