在前端开发中，<iframe> 是一种常见的嵌入式元素，它可以用于加载外部网页、视频和其他资源。然而，在使用 <iframe> 的过程中，我们可能会遇到一个奇怪的问题：在 Chrome 浏览器中，Iframe.readyState 属性似乎不起作用。
问题描述
Iframe.readyState 是一个属性，它用于检测 <iframe> 元素是否已经加载完成。当 Iframe.readyState 的值为 "complete" 时，表示 <iframe> 已经完全加载完成，可以进行操作。然而，在 Chrome 中，即使 <iframe> 已经加载完成，Iframe.readyState 的值也可能仍然是 "loading"。
这个问题看起来非常奇怪，因为在其他浏览器（如 Firefox 和 Safari）中，Iframe.readyState 的表现是正常的。那么，究竟是什么原因导致了这个问题呢？
原因分析
经过查阅资料和测试，我们发现，这个问题与 Chrome 浏览器的缓存机制有关。具体来说，如果 <iframe> 加载的内容被 Chrome 缓存了，那么当我们再次打开包含这个 <iframe> 的页面时，Chrome 会直接从缓存中读取内容，并且不会更新 Iframe.readyState 的值。因此，即使 <iframe> 已经加载完成，Iframe.readyState 仍然是 "loading"。
解决方法
为了解决这个问题，我们可以采用以下两种方法之一：
方法一：禁用缓存
禁用 Chrome 浏览器的缓存机制，强制刷新 <iframe> 加载的内容。具体来说，我们可以在打开包含 <iframe> 的页面时，使用以下代码：
--------- -----
------
------
----- ----------------
-------------- ----- ------------
--------
-- -- ------ --
-- -------------------- -
-- ---------------------------- -- -- -
--------------------
----------------------
- ---- -
----------------------
-
-
---------
-------
------
---- ------- ------ ---
-------
-------这段代码中，我们使用了 window.performance 和 performance.navigation.type 属性来检测页面是否被刷新。如果页面被刷新，就强制刷新 <iframe> 加载的内容。
方法二：手动更新状态
手动更新 <iframe> 的状态，使其与实际加载状态保持一致。具体来说，我们可以在 <iframe> 元素上绑定一个 load 事件，当 <iframe> 加载完成后，手动将 Iframe.readyState 的值设置为 "complete"。示例代码如下：
--------- -----
------
------
----- ----------------
------------- ----------------- ------------
--------
-------- -------------- -
--- ------ - ------------------------------------
----------------- - -----------
------------------------------ -----------
-
---------
-------
------
------- ------------------------- ------------- ---------------------------------
-------
-------这段代码中，我们定义了一个名为 onIframeLoad 的函数，并在 <iframe> 上绑定了 load 事件。当 <iframe> 加载完成后，onIframeLoad 函数会被调用，并手动将 Iframe.readyState 的值设置为 "complete"。
结论
在使用 <iframe> 元素时，要注意 Chrome 浏览器的缓存机制可能会导致 Iframe.readyState 属性不起作用的问题。为了解决这
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29762