React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React用iframe嵌入网站

在React项目中使用iframe嵌入一个网站的步骤

作者：Chen_Chance

本文介绍了如何在React项目中通过iframe嵌入百度网站的步骤,首先创建一个Baidu.js组件,并在该组件中设置iframe来加载百度,然后在App.js中引入并使用Baidu组件,还讨论了因安全策略可能无法加载某些网站的问题,需要的朋友可以参考下

前言

在React项目中使用iframe嵌入一个网站非常简单。以下是如何在页面中嵌入百度网站的步骤：

1. 创建一个新的组件用于嵌入iframe

首先，在src/components文件夹中创建一个新的文件Baidu.js。

在Baidu.js文件中，编写如下代码：

// src/components/Baidu.js

import React from 'react';

const Baidu = () => {
  return (
    <div>
      <iframe 
        src="https://www.baidu.com" 
        title="Baidu" 
        width="100%" 
        height="500px"
        style={{ border: 'none' }}
      />
    </div>
  );
};

export default Baidu;

2. 在主组件中导入并使用新组件

打开src/App.js文件，导入并使用刚刚创建的Baidu组件：

// src/App.js

import React from 'react';
import './App.css';
import Baidu from './components/Baidu'; // 导入Baidu组件

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Baidu /> {/* 使用Baidu组件 */}
      </header>
    </div>
  );
}

export default App;

3. 启动开发服务器并查看效果

确保你在项目根目录下，然后运行以下命令启动开发服务器：

npm start

开发服务器启动后，打开浏览器访问http://localhost:3000，你应该会看到页面中嵌入了百度网站。

总结

通过以上步骤，你已经成功在React项目中嵌入了百度网站。你可以根据需要调整iframe的宽度、高度等属性，使其更好地适应你的页面布局。

后记

你会遇到这种问题


百度等许多网站出于安全原因，通常会禁止在iframe中加载它们的内容。这是因为这些网站启用了 X-Frame-Options 或 Content-Security-Policy 来防止被嵌入到其他网站中。

不过，我们可以使用其他方法来展示外部内容，比如链接跳转，或者展示网站的截图等。以下是几种替代方法：

方法一：使用链接跳转

在页面中提供一个链接，用户点击链接后在新标签页中打开百度网站。

创建一个新的组件 BaiduLink.js：

// src/components/BaiduLink.js

import React from 'react';

const BaiduLink = () => {
  return (
    <div>
      <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noopener noreferrer">
        打开百度
      </a>
    </div>
  );
};

export default BaiduLink;

在 App.js 中导入并使用 BaiduLink 组件：

// src/App.js

import React from 'react';
import './App.css';
import BaiduLink from './components/BaiduLink'; // 导入BaiduLink组件

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <BaiduLink /> {/* 使用BaiduLink组件 */}
      </header>
    </div>
  );
}

export default App;

方法二：使用图片展示

展示百度首页的截图或其他相关图片，用户可以点击图片跳转到百度。

创建一个新的组件 BaiduImage.js：

// src/components/BaiduImage.js

import React from 'react';

const BaiduImage = () => {
  return (
    <div>
      <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  target="_blank" rel="noopener noreferrer">
        <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" style={{ width: '200px' }} />
      </a>
    </div>
  );
};

export default BaiduImage;

在 App.js 中导入并使用 BaiduImage 组件：

// src/App.js

import React from 'react';
import './App.css';
import BaiduImage from './components/BaiduImage'; // 导入BaiduImage组件

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <BaiduImage /> {/* 使用BaiduImage组件 */}
      </header>
    </div>
  );
}

export default App;

总结 

到此这篇关于在React项目中使用iframe嵌入一个网站的文章就介绍到这了,更多相关React用iframe嵌入网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文