使用 JavaScript 加载新站点

在网页开发中，我们经常需要在当前页面加载其他站点的内容，这就需要使用到 JavaScript 了。JavaScript 可以通过 XMLHttpRequest 对象来向其他站点发送请求，并将返回的数据插入到当前页面中。下面是一个基本的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.onload = function() {
  const responseText = xhr.responseText;
  // 将 responseText 插入到页面中
};
xhr.send();

上面的代码向 https://example.com 发送了 GET 请求，当请求成功返回时，会将返回的数据赋值给 responseText 变量，并将其插入到页面中。但需要注意的是，由于同源策略的限制，JavaScript 仅能够向与当前页面同源的站点发送请求，否则将会出现跨域错误。

针对跨域请求的问题，可以在被请求的站点上设置 CORS 头部，允许当前页面进行跨域访问。具体可以参考 MDN 文档。

另外，如果需要在请求过程中显示加载动画或者错误提示，可以在请求开始时显示加载动画，在请求完成时隐藏它。代码可以如下：

// 显示加载动画
const loadingElement = document.createElement('div');
loadingElement.className = 'loading';
document.body.appendChild(loadingElement);

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.onload = function() {
  const responseText = xhr.responseText;
  // 将 responseText 插入到页面中
  // 隐藏加载动画
  document.body.removeChild(loadingElement);
};
xhr.onerror = function() {
  // 显示错误提示
  const errorElement = document.createElement('div');
  errorElement.className = 'error';
  errorElement.innerHTML = '加载失败，请检查网络连接';
  document.body.appendChild(errorElement);
  // 隐藏加载动画
  document.body.removeChild(loadingElement);
};
xhr.send();

以上代码在请求开始时显示一个名为 loading 的元素，请求完成时隐藏该元素；当请求失败时，会显示一个名为 error 的元素，并提示加载失败的信息。

总之，通过 JavaScript 加载新站点需要注意跨域问题，并可以在请求开始时显示加载动画，在请求失败时显示错误提示，以提升用户体验。