Create-Reaction-App创建这个&lt；iframe&>阻止我直接点击或编辑应用程序，除非我在元素浏览器编辑器中将其删除 [英] Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor

问题描述

我最近进行了一次Create-Reaction-app的全局安装，我遇到了一个问题，当我处理一个项目时，它不是直接编辑我渲染的内容，而是在整个应用程序周围创建这个容器。

进一步检查后，它看起来像是在浏览器中呈现的：

<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>

我已经截图如下(iFrame是右边的橙色文本)，但它超级讨厌，我已经删除了css道具，无法想象是什么导致了我的应用程序周围的这个容器。

还有没有人见过这个？我必须删除此IFRAME才能直接从浏览器编辑元素，但我想不出为什么每次在浏览器中加载应用程序时都会呈现这种情况。

推荐答案

经过大量的研究和测试，我终于弄明白了这一点，我希望它能拯救任何和我在😊一样的情况下的人

我找到了两种可以解决此问题的解决方案，一种是使用有时会起作用的.env文件，另一种是css，我想说它始终可以解决此问题。

修复#1：.env解决方案

在根文件夹级别(与.gitignore、Package.json、Readme.md、ya n.lock、/src相同的级别)中，创建一个.env文件并在其中包含以下内容：

FAST_REFRESH=false

这有时会起作用，但如果一段时间后不起作用，请继续使用下面的第二个解决方案。

修复#2：App.css修复以禁用iFrame的指针事件

这个解决方案让我省了一大笔钱。基本上，该解决方案解决的问题是在React.js模板中的应用程序中包装html文件。

在您的全局样式文件中，将以下属性添加到iframe元素：pointer-events: none。然后，我将这个css文件导入到我的JSX页面中，这样它就会删除页面周围的iframe包装器。这将禁用IFRAME覆盖，并允许您有效地单击窗口框架内的任何位置。

iframe {
  pointer-events: none;
}

希望这些解决方案中的一个能为您节省数小时的研究和时间😊

这篇关于Create-Reaction-App创建这个&lt；iframe&>阻止我直接点击或编辑应用程序，除非我在元素浏览器编辑器中将其删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！