Inject aloha in iframe

Question

Я пытаюсь ввести aloha на страницу, загруженную iframe. Это внутренний HTML моего head тега:

<title>Getting Started with Aloha Editor</title> 
<link rel="stylesheet" href="/Styles/aloha.css" /> 
<script src="/Scripts/aloha/require.js"></script> 
<script src="/Scripts/aloha/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,common/image"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#email-template").load(function() { 
      var link = this.contentWindow.document.createElement("link"); 
      link.rel = "stylesheet"; 
      link.href = "/Styles/aloha.css"; 
      this.contentWindow.document.body.appendChild(link); 
      var script = this.contentWindow.document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = "/Scripts/aloha/require.js"; 
      this.contentWindow.document.body.appendChild(script); 
      script = this.contentWindow.document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = "/Scripts/aloha/aloha.js"; 
      script["data-aloha-plugins"] = "common/ui,common/format,common/highlighteditables,common/link,common/image"; 
      this.contentWindow.document.body.appendChild(script); 
      script = this.contentWindow.document.createElement("script"); 
      script.type = "text/javascript"; 
      script.innerHTML = '$(function() {Aloha.ready(function() {Aloha.jQuery(".editable-content").aloha();})});'; 
      this.contentWindow.document.body.appendChild(script); 
     }); 
    }); 
</script> 

Это внутренний HTML моего body тега:

<div id="main"> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Value</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>From</td> 
       <td><strong>a@b.c</strong></td> 
      </tr> 
      <tr> 
       <td>To</td> 
       <td><strong class="editable-content">d@e.f</strong></td> 
      </tr> 
      <tr> 
       <td>CC</td> 
       <td><strong class="editable-content">g@h.i</strong></td> 
      </tr> 
      <tr> 
       <td>Subject</td> 
       <td><strong>Please read this (not) really important email</strong></td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td><iframe id="email-template" src="<%= ResolveUrl("~/Forms/Integration/Remedy/SandboxAlohaInner.aspx") %>"></iframe></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<script type="text/javascript"> 
    Aloha.ready(function() { 
     Aloha.jQuery('.editable-content').aloha(); 
    }); 
</script> 
<asp:Button ID="Send" runat="server" Text="Send" /> 

Все хорошо на внешней странице, но страница внутри фрейма не распознает переменную Aloha , Зачем?

Сообщение об ошибке выглядит следующим образом:

Uncaught ReferenceError: Aloha is not defined

Answer 1

Я был в состоянии решить эту проблему. Проблема заключалась в том, что переменная Aloha еще не создана, когда я пытаюсь ее достичь. Решение это очень некрасиво обходной:

script.innerHTML = 'var alohaInterval = setInterval(function() {if (typeof Aloha === "undefined") {return;} clearInterval(alohaInterval); Aloha.ready(function() {Aloha.jQuery(".editable-content").aloha();})}, 100);'; 

вместо предпоследняя строка в load случае, показанных на head.