javascript - 如何解决操作 iframe 的 js 和 iframe 加载之间的竞争条件？

Question

我有一个 javascript 文件，用于检查 iframe 是否已加载，如果已加载，则将一些内容附加到 iframe

body_application.js

var iframe_object = $('#embedded_document_container')
  .load(function(){
    $(this).contents().find('head').append('<link type="text/css" rel="stylesheet" media="all" href="/assets/style.css"/>');
  });

但我注意到这种方法存在下面场景 1 中提到的问题。

第一种情况:我检查了网络日志，首先加载了 iframe，然后加载了对 iframe 进行修改的脚本 body_application.js。

在这种情况下，它不会附加 style.css

第二种情况:我检查了网络日志，在对 iframe 进行修改的脚本 body_application.js 之后加载了 iframe。

在这种情况下，它会附加 style.css

还有其他方法可以实现这一目标吗？

Answer 1

您的代码会导致所谓的 race condition ，其中结果取决于外部因素，因为它们影响各个操作的速度，在本例中是子页面的加载速度。

最简单的解决方案是将 iframe 的 src 属性最初保留为空，然后在应用 onload 事件后设置它:

var iframe_object = $('#embedded_document_container')
  .load(function(){
    $(this).contents().find('head').append('<link type="text/css" rel="stylesheet" media="all" href="/assets/style.css"/>');
  });
iframe_object.attr('src', 'http://www.stackoverflow.com/');

这会自动确保在事件发生之前永远不会加载页面。

您可以使用更复杂的解决方案，例如从 iframe 内部广播消息，或检查其加载状态，然后有条件地设置事件，但上面的解决方案是最实用的。