react + ts + vite如何通过 https://www.mpfa.org.hk/home/enquiries 获取到网页的标题,不使用axios 与原生fetch方式,使用前端其他方式实现
时间: 2025-06-29 18:24:28 AIGC 浏览: 19
### 使用 React 和 TypeScript 以及 Vite 实现获取网页标题
为了实现这一目标而不依赖 `axios` 或者 `fetch`,可以考虑使用浏览器原生的 JavaScript API 来发起 HTTP 请求并解析 HTML 文档以提取 `<title>` 标签的内容。
#### 方法一:利用 iframe 动态加载页面并通过内容文档读取 title 属性
这种方法适用于同源策略下的 URL 访问。如果要访问跨域资源,则会遇到 CORS 限制问题。
```javascript
// src/utils/getPageTitle.js
export function getPageTitle(url) {
return new Promise((resolve, reject) => {
try {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
iframe.onload = () => {
let doc = iframe.contentDocument || iframe.contentWindow.document;
resolve(doc.title);
document.body.removeChild(iframe); // 清理 DOM
};
document.body.appendChild(iframe);
} catch (error) {
reject(`Failed to load page ${url}: ${error.message}`);
}
});
}
```
此函数会在后台创建一个隐藏的 iframe 并等待其完全加载完毕之后再从中取出所需的标题信息[^1]。
请注意,在实际应用中应该谨慎处理来自不可信来源的数据,并确保遵循安全最佳实践来防止潜在的安全风险。
由于现代 Web 应用程序通常运行于严格模式之下,因此上述方式可能并不总是可行特别是当涉及到不同域名之间的交互时。对于这种情况,建议采用服务器端代理服务来进行抓取操作或者寻找第三方API接口作为中介层。
#### 方法二:借助 Headless Browser 如 Puppeteer(需 Node.js 环境)
虽然题目要求纯前端解决方案,但如果允许引入额外工具的话,Puppeteer 是一种强大的无头浏览器自动化库,它可以在 Node.js 中启动 Chromium 浏览器实例执行复杂的浏览任务,比如导航到特定网址、截屏甚至爬虫等。不过需要注意的是这种方式不适合直接嵌入客户端代码里而是更适合部署在后端服务上提供 RESTful 接口供前端调用。
考虑到以上两种方案各有优劣,具体选择取决于项目的实际情况和技术栈偏好。
阅读全文