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

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

您的代码会导致所谓的竞争条件,其结果取决于外部因素,因为它们影响单个操作的速度,在这种情况下是子页面的加载速度.

最简单的解决方案是保持最初的src属性为iframe空,然后在应用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内部广播消息,或检查其负载状态,然后有条件地设置事件,但上述解决方案才是最实用的.