将 aloha 注入 iframe

Question

我正在尝试将 aloha 注入到加载了 iframe 的页面中。这是我的 head 标签的内部 html:

<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>

这是我的 body 标签的内部 html:

<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" />

外部页面一切正常，但iframe内部页面无法识别Aloha变量。为什么？

报错信息如下：

Uncaught ReferenceError: Aloha is not defined

Answer 1

我已经解决了这个问题。问题是当我尝试访问它时 Aloha 变量尚未创建。解决方案是这个非常丑陋的 hack：

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

而不是 head 中显示的 load 事件中的倒数第二行。

将 aloha 注入 iframe

Inject aloha into iframe

javascript

iframe

jquery

javascript-injection

aloha