在更改后重新加载时使用最大z-index反应注入iframe(开发) [英] React injecting iframe with max z-index on reload after changes (development)

问题描述

我有一个带有以下.env文件的Create Reaction应用程序：

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false

当我使用yarn start启动应用程序时，在任何代码更改后，服务器在不刷新页面和丢弃页面状态的情况下进行替换，但它会在我的HTML中注入一个带有最大z索引的iframe，所以我无法进行任何交互，比如点击。

注入的iframe如下：

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

有什么方法可以避免此iframe，甚至是阻塞所有页面的巨大z索引？

推荐答案

找到根本原因：热加载器使用此iFrame将代码注入DOM。在注射后立即添加和移除它。如果在此过程中发生错误，则热加载器会中断，而不会删除IFRAME。

在我的情况下，是Content-Security-Policy错误导致注入过程中出错。

刚刚在我的应用程序中调整了我的策略，现在运行正常。

这篇关于在更改后重新加载时使用最大z-index反应注入iframe(开发)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！