如何用纯JavaScript抓取指定页面的<section class="landing-page">内容？

由于浏览器同源策略的限制，你没法在自己的网页中直接通过JS跨域抓取目标页面的内容，但有两种不依赖Node.js或第三方工具的纯JS实现方式：

1. 直接在目标页面的浏览器控制台执行 #

打开目标页面，按F12打开开发者工具的控制台，输入以下代码即可获取目标元素内容：

// 获取目标元素
const targetSection = document.querySelector('section.landing-page');

// 输出元素的完整HTML代码
console.log(targetSection.outerHTML);

// 或者输出元素的纯文本内容
console.log(targetSection.textContent.trim());

2. 使用浏览器书签工具（Bookmarklet） #

把下面的代码保存为浏览器书签，打开目标页面后点击该书签，即可自动抓取并展示目标元素的HTML内容：

javascript:(function(){
  const section = document.querySelector('section.landing-page');
  if (section) {
    const newWindow = window.open();
    newWindow.document.write('<pre>' + encodeURIComponent(section.outerHTML) + '</pre>');
    newWindow.document.close();
  } else {
    alert('未找到目标section元素');
  }
})();

注意事项 #

• 上述两种方式都是在目标页面的上下文环境中执行JS，所以不受同源策略限制。
• 如果尝试在其他域名的网页中直接通过fetch或XMLHttpRequest请求目标页面，会被浏览器的跨域拦截机制阻止，除非目标服务器配置了允许你域名的CORS规则。

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