react 如何嵌入iframe

在 React 中嵌入 iframe

React 中可以通过直接使用 <iframe> HTML 标签来嵌入外部内容。以下是具体实现方法：

import React from 'react';

const IframeExample = () => {
  return (
    <div>
      <iframe 
        src="https://example.com" 
        title="Example iframe"
        width="600"
        height="400"
        frameBorder="0"
        allowFullScreen
      />
    </div>
  );
};

export default IframeExample;

动态设置 iframe 属性

可以通过 props 或 state 动态控制 iframe 的属性：

import React, { useState } from 'react';

const DynamicIframe = () => {
  const [iframeSrc, setIframeSrc] = useState('https://example.com');

  return (
    <div>
      <iframe 
        src={iframeSrc}
        title="Dynamic iframe"
        width="100%"
        height="500px"
      />
    </div>
  );
};

处理 iframe 通信

如果需要与 iframe 内容进行通信，可以使用 postMessage API：

import React, { useEffect } from 'react';

const IframeCommunication = () => {
  useEffect(() => {
    window.addEventListener('message', (event) => {
      // 验证消息来源
      if (event.origin !== 'https://example.com') return;

      console.log('Received message from iframe:', event.data);
    });

    return () => {
      window.removeEventListener('message');
    };
  }, []);

  const sendMessageToIframe = () => {
    const iframe = document.getElementById('my-iframe');
    iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');
  };

  return (
    <div>
      <iframe
        id="my-iframe"
        src="https://example.com"
        title="Communicating iframe"
      />
      <button onClick={sendMessageToIframe}>Send Message</button>
    </div>
  );
};

安全性考虑

嵌入 iframe 时应注意以下安全事项：

• 使用 sandbox 属性限制 iframe 权限
• 验证 postMessage 的来源
• 设置 X-Frame-Options 响应头防止点击劫持
• 避免嵌入不受信任的网站

<iframe
  src="https://example.com"
  sandbox="allow-same-origin allow-scripts"
  title="Secure iframe"
/>

响应式 iframe

为了使 iframe 适应不同屏幕尺寸，可以使用 CSS：

const ResponsiveIframe = () => {
  return (
    <div style={{ position: 'relative', paddingBottom: '56.25%' /* 16:9 */ }}>
      <iframe
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%'
        }}
        src="https://example.com"
        title="Responsive iframe"
      />
    </div>
  );
};

懒加载 iframe

为提高页面性能，可以实现 iframe 的懒加载：

import React, { useState } from 'react';

const LazyIframe = () => {
  const [loadIframe, setLoadIframe] = useState(false);

  return (
    <div>
      <button onClick={() => setLoadIframe(true)}>
        Load iframe
      </button>

      {loadIframe && (
        <iframe 
          src="https://example.com"
          title="Lazy loaded iframe"
        />
      )}
    </div>
  );
};