使用 Angular Directive 在 iFrame 上拖放答案

【问题标题】：drag drop across iFrame using Angular Directive使用 Angular Directive 在 iFrame 上拖放
【发布时间】：2014-01-11 19:47:37
【问题描述】：

我需要一些控件来处理跨 iFrame 的拖放。我需要 iframe 中的功能的原因是因为它是我们正在构建的 CMS，并且“编辑页面”中的任何“绝对”css 更改也会影响主站点。

我已经编写了一个角度指令并为此构建了一个小型原型，只要它在同一页面上，它就可以完美地工作，但是当我尝试跨 iframe 做同样的事情时，它就不起作用了。即使从 iFrame 页面注册 droppbale 也不会显示在控制台中（尝试通过指令登录时）。

它是 1 个寻呼机代码，可在此处查看 - http://78.110.163.229/angDnd/outer.html

任何指导/建议都会非常有帮助。

【问题讨论】：

标签： angularjs jquery-ui iframe jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

iframe 的身体似乎从未真正被制成droppable。正文中有这段代码：

$(function () {
    $("#canvas-frame").ready(function (){
        var contents = $("#ifr").contents();
        var ifrBody = contents.find('body');
        //console.log(ifrBody);
        $(ifrBody).attr("dnd-droppable","true");
    })
});

（部分）问题如下：

我没有看到任何 #canvas-frame 元素。
即使有一个这样的元素，dnd-droppable 属性也会添加到iframe 的主体中在 angular 解析了 DOM 之后，因此根本不考虑它。

解决办法：

在您的 HTML 中，在 iframe 元素上添加一个新指令：

<iframe id="ifr" src="inner.html" dnd-droppable-iframe></iframe>

在你的 JS 中，定义新指令，让它等待 iframe 被加载，然后将 dndDroppable 指令添加到它的 body 元素并编译它，这样 Angular 就可以“捡起它”：

dndApp.directive('dndDroppableIframe', function ($compile) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            if (elem.prop('tagName') !== 'IFRAME') { return; }

            elem.ready(function () {
                var ifrBody = elem.contents().find('body');
                ifrBody.attr('dnd-droppable', '');
                $compile(ifrBody)(scope);
            });
        }
    };
});

【讨论】：

谢谢，这真的很有帮助，而且绝对是朝着正确方向迈出的一步——我对 Angular 还比较陌生，但仍在学习中。我现在根据您的建议更新代码 - 但是，仍然存在一个小挑战。元素不会像页面 div 一样直接放在 iFrame 上。我现在正在尝试进一步调试，如果您对我还缺少什么有任何进一步的建议 - 这将非常有帮助。
不知何故我忘了等待框架加载。请尝试我的更新代码。
刚刚试过了，还不行。实际上有些奇怪 - 当我在 onPageDiv 中放置元素时，它们实际上也被复制到 iFrame 主体上。当我在 iFrame 上放置任何东西时，它根本不会做任何事情。似乎，仍然缺少一些东西......不知道为什么，但我几乎无能为力 - 在过去的 2-3 天里一直在努力解决这个问题。非常感谢您的帮助。
嘿，结果比我最初怀疑的要严重得多。你有没有运气。我仍在尝试弄清楚，但为了使结果（如果有）对您有用，我需要知道确切的要求（例如：您是否有权访问顶级页面和/或“iframed”一个？你要DnD（或所有元素）什么样的元素？你还需要“inter-iframe”DnD（即从一个iframe到另一个）？
嗨，是的，我认为我设法在它方面取得了进一步的进展。我的要求 (1) 我将有 1 个顶级页面，其中将包含一个 iFrame。两者都将具有相同的域，因此不会使用不同的 URL，并且跨站点脚本应该不是问题。 (2) 作为一个CMS系统，元素将是小部件（div、输入框、图像等），用户可以从iFrame面板右侧的工具箱中拖动这些小部件来组成页面并在后台生成HTML .它将是一组有限的元素。