当前位置：首页 > React

react如何加载网页

2026-03-30 22:10:06React

React 加载网页的方法

使用 iframe 嵌入网页

在 React 组件中可以通过 iframe 直接加载外部网页，适用于需要嵌入完整第三方页面的场景。

function WebPageViewer() {
  return (
    <iframe 
      src="https://example.com" 
      width="100%"
      height="500px"
      title="External Web Page"
    />
  );
}

iframe 支持设置 sandbox 属性控制权限，例如禁止脚本执行或表单提交等安全限制。

通过 window.open 打开新窗口

需要在新标签页或窗口中打开网页时，可以使用浏览器原生方法。

function OpenWebPageButton() {
  const handleClick = () => {
    window.open('https://example.com', '_blank');
  };

  return <button onClick={handleClick}>Open Web Page</button>;
}

注意浏览器可能会拦截弹出窗口，建议在用户交互事件中触发。

使用 react-iframe 库

对于更复杂的 iframe 控制，可以安装专用库：

npm install react-iframe

实现方式：

import Iframe from 'react-iframe';

function ResponsiveIframe() {
  return (
    <Iframe
      url="https://example.com"
      width="100%"
      height="450px"
      display="block"
      position="relative"
    />
  );
}

动态加载网页内容

通过 fetch API 获取网页内容后渲染：

function WebContentLoader() {
  const [html, setHtml] = useState('');

  useEffect(() => {
    fetch('https://example.com')
      .then(response => response.text())
      .then(data => setHtml(data));
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

注意这种方法存在跨域限制，且直接渲染原始 HTML 有 XSS 风险，应确保内容可信或进行净化处理。

使用 WebView 组件 (React Native)

在移动端开发时，React Native 提供专用组件：

import { WebView } from 'react-native-webview';

function AppWebView() {
  return (
    <WebView 
      source={{ uri: 'https://example.com' }}
      style={{ flex: 1 }}
    />
  );
}

该组件支持注入 JavaScript 和自定义头部等高级功能。

react如何加载网页