如何通过js读取跨域的html文件

跨域读取 HTML 文件通常需要使用 CORS 或 JSONP 技术。以下是两种方法的介绍：

### 使用 CORS

CORS（跨源资源共享）是一种浏览器技术，它允许网页向其它域名的服务器发出 XMLHttpRequest 请求，从而实现跨域通信。如果服务器支持 CORS，那么你只需要在 JavaScript 中发送一个 GET 请求即可读取跨域的 HTML 文件。以下是一个示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/example.html');
xhr.withCredentials = true; // 如果需要发送身份凭证，需要设置此项
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText); // 打印 HTML 文件内容
  } else {
    console.log('请求出错。');
  }
};
xhr.send();

在以上代码中，我们向 `http://example.com/example.html` 发送了一个 GET 请求。由于我们需要发送身份凭证，因此需要设置 `withCredentials` 为 `true`。如果服务器支持 CORS，那么请求会成功，并且我们可以通过 `xhr.responseText` 获取响应文本。

### 使用 JSONP

JSONP（JSON with Padding）是一种跨域通信技术，它通过动态创建一个 `<script>` 标签来实现跨域获取数据。以下是一个示例：

function handleResponse(response) {
  console.log(response); // 打印 HTML 文件内容
}

const script = document.createElement('script');
script.src = 'http://example.com/example.html?callback=handleResponse';
document.body.appendChild(script);

在以上代码中，我们创建了一个 `handleResponse` 函数，它将会处理服务器返回的数据。然后，我们动态创建一个 `<script>` 标签，将 `src` 属性设置为 `http://example.com/example.html?callback=handleResponse`。服务器将会返回类似于 `handleResponse('HTML 文件内容')` 的响应，从而触发我们定义的 `handleResponse` 函数，并将 HTML 文件内容作为参数传入。请注意，服务器需要支持 JSONP，才能够返回正确的响应。