脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React用iframe嵌入网站

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

 更新时间：2024年09月09日 09:11:18   作者：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嵌入网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • react解决 Hooks 闭包陷阱的问题

    react解决 Hooks 闭包陷阱的问题

    本文主要介绍了react解决 Hooks 闭包陷阱的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2026-05-05
  • react循环数据(列表)的实现

    react循环数据(列表)的实现

    这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 简化Cocos和Native交互利器详解

    简化Cocos和Native交互利器详解

    这篇文章主要为大家介绍了简化Cocos和Native交互利器详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • react之umi配置国际化语言locale的踩坑记录

    react之umi配置国际化语言locale的踩坑记录

    这篇文章主要介绍了react之umi配置国际化语言locale的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • React Native中导航组件react-navigation跨tab路由处理详解

    React Native中导航组件react-navigation跨tab路由处理详解

    这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • react-router-dom v6版本跳转路径的实现方法

    react-router-dom v6版本跳转路径的实现方法

    这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 按需加载的实现方式及原理详解

    本篇文章主要介绍了React-router 4 按需加载的实现方式及原理详解，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • React Router 中实现嵌套路由和动态路由的示例

    React Router 中实现嵌套路由和动态路由的示例

    React Router 是一个非常强大和灵活的路由库，它为 React 应用程序提供了丰富的导航和 URL 管理功能，能够帮助我们构建复杂的单页应用和多页应用，这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
    2023-05-05
  • 一篇文章带你理解React Props的 原理

    一篇文章带你理解React Props的 原理

    这篇文章主要为大家介绍了ReactProps的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • React 高德地图进京证路线规划问题记录(汇总)

    React 高德地图进京证路线规划问题记录(汇总)

    这篇文章主要介绍了React高德地图进京证路线规划问题小记,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08

最新评论