子窗口上调用adoptNode和importNode在IE和边缘失败(Calling adoptNo

2019-09-27 02:42发布

调查结果和支持信息

由于user4749485用于指出一个链接我错过了在下面的意见。 正如谁做的人指出,似乎这是由MS从另一个窗口传递给函数,如证实之前,HTML元素转换为普通对象造成这里 。 我把原来的一点点远,并测试了它的iframe,以及并增加了对同一产地的测试。


从修改了代码这个答案把文档背景。 它进一步证实了它们的IE传递给一个函数之前,从外部窗口来简单Object任何节点转换的怀疑。 我已经更新了这个Plunkr与新的测试byCustomImportNode。

添加了另一个测试byCustomImportNode2这使在目标文件中的自定义导入节点功能。 它使元素的克隆,但事件不存。 看来我只是将不得不做出一个特例。


另一个使用例如角几乎起作用。 打开的窗口中,复制内容,并且未能在$编译。 我想这是因为它试图用进口或采用节点的ngInlcude。


我试图从移动当前窗口到页面打开一个新的窗口元素。 除了IE和边缘的所有浏览器下面的工作方法。 边抛出一个No such interface supported错误,IE抛出一个一般性错误。 这篇文章指出,问题是,它试图从一个文档片段添加多个元素。 然而,在我下面的测试代码,我只加一个元素,它仍然失败。 有趣的是,它也失败的importNodeadoptNode电话。 是否有保持连接的数据和听众的任何变通办法?

<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <head>
    <body>
    <div id="test">test</div>
    <button onclick="byHtml()">by html()</button>
    <button onclick="byClone()">by clone()</button>
    <button onclick="byDirect()">direct append</button>
    <button onclick="byAdoptNode()">adoptNode()</button>
    <button onclick="byImportNode()">importNode()</button>
    <script>
        function byHtml(){
            var nwin= window.open('about:blank','','');
            // Works but loses any bound listeners
            $(nwin.document.body).append($('#test').html());
        }
        function byClone(){
            var nwin= window.open('about:blank','','');
            // Fails in Edge and IE
            $(nwin.document.body).append($('#test').clone());
        }
        function byDirect(){
            var nwin= window.open('about:blank','','');
            var node= document.getElementById('test');
            // Fails in Edge and IE
            nwin.document.body.appendChild(node);
        }
        function byAdoptNode(){
            var nwin= window.open('about:blank','','');
            // IE and Edge fail on the adoptNode
            var node= nwin.document.adoptNode(document.getElementById('test'));
            nwin.document.body.appendChild(node);
        }
        function byImportNode(){
            var nwin= window.open('about:blank','','');
            // IE and Edge fail on the importNode
            var node= nwin.document.importNode(document.getElementById('test'), true);
            nwin.document.body.appendChild(node);
        }
    </script>
    </body>
</html>

编辑

我曾尝试在列出的项目这个职位 。 他们不解决问题。

  • 该页面正在从服务器提供服务。
  • 我已经更换了about:blank既为空字符串和URL到视觉上是空白的HTML页面在同一服务器。 无论是解决了问题。
  • IE浏览器总是在标准模式。 adoptNode和importNode从来没有定义。 他们把错误“支持没有这样的接口”。

编辑2
Plunker测试与上述的编辑。 注:Plunker给了我一个不同的错误在IE 11比我的服务器上运行的代码。 该Plunker抛出不支持错误的方法。
边缘仍然抛出No such interface supported error

Answer 1:

解决的办法是不漂亮。 你需要编译它,得到的HTML内容,删除ngInclude的所有事件,在一个DIV包装它,HTML字符串附加到新的窗口,并重新编译。

Plnkr: http://plnkr.co/edit/aGpN3LHllU2ReHp1zG26?p=preview

$scope.window= window.open('', '', '');
var windowScope= $scope.$new();
var body= angular.element($scope.window.document.body);
var contents= $compile($element.contents())(windowScope);
setTimeout(function(){
    // The div is needed
    // http://stackoverflow.com/a/38599093/631295
    body.append('<div>'+$element.html().replace(/ng-include="[^"]+"/g,'')+'</div>');
    windowScope.$destroy();
    windowScope= $scope.$new();
    $compile(body)(windowScope);
}, 1000);


文章来源: Calling adoptNode and importNode on a child window fails in IE and Edge