Question

我需要一些控件才能使用Drag＆amp; amp;跨越iFrame。我需要iframe中的功能的原因是因为我们正在构建的CMS以及“编辑页面”中的任何“绝对”css更改也将影响主站点。

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

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

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

Answer 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元素。
即使有一个这样的元素，{<1}}属性也会在 angular解析DOM之后添加到dnd-droppable的正文中，所以它是根本没有考虑到。

解决方案：

在HTML中，在iframe元素上添加新指令：

iframe

在你的JS中，定义新的指令以便它等待加载<iframe id="ifr" src="inner.html" dnd-droppable-iframe></iframe>，然后将iframe指令添加到它的body元素并编译它，所以Angular可以“捡起它” “：

dndDroppable

使用Angular Directive在iFrame上拖放

1 个答案:

解决方案：