什么是 iframe？
iframe，全称 inline frame，是 HTML 中的一种标签，可以在当前页面中嵌入另一个 HTML 页面。通过 iframe，我们可以在一个网页中嵌入其他网页、视频、甚至广告等内容。
iframe 的问题
在使用 iframe 进行嵌入时，有时候会出现一些问题。在一些情况下，iframe 内的编辑器（如 Draft.js）无法正确地监听到外围的鼠标事件，导致我们无法进行正常的编辑。这是因为 iframe 的事件机制和父级页面的事件机制是分离的。
bloodyowl-draft-js-iframe-fix
为了解决这个问题，我们可以使用 npm 包 bloodyowl-draft-js-iframe-fix。这个 npm 包是一个扩展，可以让 iframe 内的 Draft.js 编辑器正确地获取到外围页面的鼠标事件。
如何使用 bloodyowl-draft-js-iframe-fix？
在项目中引入 bloodyowl-draft-js-iframe-fix
在命令行中运行npm命令，在您的项目目录中安装它：
npm install bloodyowl-draft-js-iframe-fix
在需要的页面中引入 bloodyowl-draft-js-iframe-fix
在你的 JavaScript 文件中引入 BloodyowlDraftJSIframeFix，如下所示：
import BloodyowlDraftJSIframeFix from 'bloodyowl-draft-js-iframe-fix';
使用 BloodyowlDraftJSIframeFix 实例化 Draft.js 编辑器
这里我们以 Draft.js 官方例子 为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ------------ ---- -----------
------ ------------------------- ---- --------------------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - ------------- ---------------------------
------------- - ------------- -- -----------------------------
---------- - -- -- -------------------------
--------------------- - --------- -- --------------------------------
-
------------------- -
----- ------ - ---------------------------------------
----- --- - --- --------------------------
------- -- ------ -- -------- -----
------------------------- -- ------ ---------------
--
-----------
-------------
-
-------------------------- -
----- -------- - ---------------------------
-----------------------
-------
--
-- ---------- -
------------------------
------ -----
-
------ ------
-
-------- -
------ -
---- --------------------
---- --------------------- ---------------------
-------
------------------------------------
----------------------------------------
------------------------
------------------ ---- --------
------------
--
------
------
--
-
-
----- ------ - -
----- -
----------- --------------- ------------
-------- ---
------ ----
--
------- -
------- ---- ----- ------
------- -------
---------- ---
------------ ---
------------- ---
--
--
----------------
--------- ---
-------------------------------
--总结
通过 npm 包 bloodyowl-draft-js-iframe-fix，我们可以非常方便地解决 iframe 内的 Draft.js 编辑器无法监听到外围鼠标事件的问题。你可以使用我提供的示例代码尝试集成它到你的项目中，也可以开发其他类似的 npm 包解决更多问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb881e8991b448da3ec