react项目热更新自动插入了iframe

已于 2022-09-25 23:14:59 修改
阅读量1k 收藏 1
点赞数 1
分类专栏： Web开发 文章标签： react.js 前端 javascript
于 2022-09-25 23:12:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IICOOM/article/details/127045233
版权

最近使用create-react-app创建了前端项目，热更新触发后，查看DOM元素发现在整个页面插入了一个iframe，层级很高，会影响查看其他元素。如上图所示：

热更新iframe问题

查阅了一些资料，发现这是一个已知的bug，解决方法是在package.json中安装依赖：

"devDependencies": {
    "react-error-overlay": "^6.0.9"
}

并且在"dependencies": {} 的下面加入：

"dependencies": {
	...
},
"resolutions": {
    "react-error-overlay": "6.0.9"
},

这样重新启动项目，热更新后发现就不会再出现那个烦人的iframe了。

参考链接

IICOOM
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
reactiframe:使用ReactJS构建的iFrame
04-27
React框架 使用ReactJS构建的iFrame 即将推出 ....
React 莫名出现一个＜iframe＞覆盖画面导致不能点击
weixin_40476977的博客
03-29 684
在自己项目的根目录css样式文件（全局样式文件）中，为iframe 添加pointer-events: none 属性。解决方法：通过css使iframe不再阻止点击，或者让iframe不再显示。比如我根目录的文件是 index.scss, 就在文件中添加。若不想禁用页面中所有iframe。或者是因为使用旧版本。
iframe 的基本介绍与使用
最新发布
山重水复疑无路，柳暗花明又一村。
04-15 937
iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。
react-overlay:用于覆盖内容的React组件
05-16
React覆盖 用于覆盖内容的React组件。 不推荐使用的警告 0.1.7可能是react-overlay的最新版本。 请改用 。 这很棒！ 入门 使用npm安装react-overlay npm install react - overlay -- save 在代码中需要Overlay组件 import { Overlay } from 'react-overlay' ; // or const { Overlay } = require ( 'react-overlay' ) ; // or var Overlay = require ( 'react-overlay' ) . Overlay ; 在代码中使用叠加层 render ( ) { // ... return ( < div> < Overlay> < span
React Native 实现热更新并自动签名打包功能
08-19
主要介绍了React Native 实现热更新并自动签名打包，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
react+webpack热更新、保存react状态
01-20
1、先搭建一个webpack+react的项目。 2、webpack.config.js中配置 module.exports = { //... devServer: { hot: true } }; module.exports = { //... plugins: [ //.. new webpack.HotModuleReplacementPlugin() ], }; 3、index.tsx中配置,我用的是typesctipt，不然的话就是index.js，也就是项目入口的js文件 let _module
react-iframe-bind:在 iframe 之间共享组件
06-10
iframe 绑定 在 iframe 之间共享组件并保持同步 用法 npm install npm start open http://localhost:3000 关于 这个演示演示了一些事情： 用于在商店和组件之间进行通信的模式。 通过将父 iframe 上的组件class暴露在父级的window对象上并使用子级的React实例对其进行实例化，从而与同一域中的子class共享父 iframe 上的组件class 。 它将使用来自父存储的数据呈现，而在子上处理 DOM。 重新加载子框架时，子框架将与父框架保持同步。 并且不应在父级上留下对卸载子级的引用。 你可以不同意这样的角一条指令，但这个演示告诉你如何与共享factory I帧之间并结合消化周期一起 使用窗口消息事件与从不同域加载的 iframe 通信的组件（安全限制防止域之间共享对象）。 孩子有自己的商店，所以如果你重新加载这
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9785
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
react 嵌套iframe_React嵌套iframe,使用postMassage进行交互
weixin_35523284的博客
01-13 3132
iframe是什么? 引用:MDNwindow.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议(通常为https)，端口号(443为https的默认值)，以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控...
前端面试宝典React篇12 React 的渲染异常会造成什么后果？
fegus的博客
09-11 741
本讲中的问题与方案都不复杂，但着重强调了工程思维。你会发现在有基本数据支撑下，去描述一件事，会更立体，让人更容易理解这件事的价值，也更加让人信服。当然工程思维不是只能回答该讲的问题，它还可以解决很多其他问题，所以在日常工作和生活中，你可以思考下哪些问题是可以用这种思维来回答的，欢迎在留言区留下你的答案。在下一讲中，我将会介绍如何通过描绘基线来完成性能优化。《大前端高薪训练营》
reactnative-源码-热更新 iOS
10-29
reactnative-源码-热更新 iOS。下载后即可查看。
react_native热更新
11-09
react_native 热更新功能的简介和相关第三方工具的介绍
前端 面试题
weixin_47338877的博客
06-07 2701
前端面试
狗蛋开发日记
weixin_44726476的博客
03-31 1982
平常写项目时碰到的一些前端问题和技巧
开发中遇到的问题ing...
Program Apes
11-26 395
多行文本，react环境配置，base64，空气刘海，node-sass，响应转态码，process is not defined
react 嵌套iframe_react添加/嵌入 iframe
weixin_39965161的博客
12-22 984
react 嵌入 iframe 主要是为了隔离富文本，避免跟宿主环境的样式、变量等造成污染。情况1：后端返回一个完整的网页，前端直接 `` 就可以了。情况2：后端返回内容不可控 (比如以下例子)。用法：index.tsx:export default function Iframe () {const contentIFrameRef = useRef(null)const [iframeHeig...
react process is not defined，全屏iframe覆盖问题
【03】的博客
04-07 1938
问题 在运行时，浏览器控制台报错：process is not defined，并且会在页面创建个全屏iframe，阻止页面交互，头痛… 解决 固化react-error-overlay版本,下载包 npm i --save-exact react[email protected] npm i --save-dev react[email protected] package.json添加以下代码 "resolutions": { "react-error-overlay": "6.0.9"
记录react项目中引入iframe通信问题以及请求多次问题
m0_53197203的博客
03-12 345
之前想在iframe加载之前实现一个loading，实现方式是使用useRef钩住iframe元素，在当前的current.onload中去改变了loading的状态，这样会使iframe页面刷新2次甚至3次，意味着会多次请求接口，并且可能造成通过postMessage传递的数据丢失。添加判断，如果有source这个来源就说明不是用户发来的提交信息，而是iframe打开的常规消息。页面中点击按钮会打开一个遮罩层，遮罩层中会通过iframe嵌入另一个域名的网站，呈现问卷调查表。
react native 热更新
08-10
回答: React Native的热更新是指在不需要重新发布和重新安装应用程序的情况下，通过更新应用程序的JavaScript代码来实现应用程序的更新。在安卓平台上，可以通过插件实现应用的热更新，但是在iOS上却无法实现。这是因为苹果对应用的审核标准非常严格，并且发版速度较慢，所以热更新能力对于iOS应用显得尤为重要。在React Native中，可以使用CodePush插件来实现热更新。CodePush插件提供了一组API，可以用于获取当前已安装更新的元数据、检查是否有更新可用并下载更新等操作。具体的代码可以参考CodePush的示例应用中的demo.js文件，这个文件中包含了每次启动应用程序时检查更新和下载的代码。通过使用CodePush插件，开发者可以方便地实现React Native应用的热更新功能。123 #### 引用[.reference_title] - *1* [快速了解react native 热更新](https://blog.csdn.net/wangbaobao512/article/details/127241775)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* *3* [React Native CodePush 最新配置](https://blog.csdn.net/maomaoyu3211/article/details/84908556)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值