在IE和Edge中，在子窗口上调用adoptNode和importNode失败 [英] Calling adoptNode and importNode on a child window fails in IE and Edge
问题描述
调查结果和支持信息
感谢user4749485指出我在以下评论中错过了。正如制作它的人所指出的那样，这似乎是由于MS将HTMLElement转换为普通对象，然后再将其传递给另一个窗口的函数，如图所示这里。我把原始版本稍微加了一点，并在iframe上进行了测试，并添加了相同来源的测试。
Thanks to user4749485 for pointing out a link I missed in the comments below. As pointed out by the person who made it, it seems this is caused by MS converting the HTMLElement to a normal Object before passing it to a function from another window as demonstrated here. I took the original a little bit farther and tested it on an iframe as well and added tests for same origin.
修改来自此答案的代码，以获取文档上下文。它进一步证实了IE将任何节点从外部窗口转换为普通对象，然后将它们传递给函数的怀疑。我已使用自定义插入节点的新测试更新了此Plunkr 。
Modified the code from this answer to take a document context. It further confirms the suspicion that IE converts any Nodes from external windows to a plain Object before passing them to a function. I have updated this Plunkr with the new test byCustomImportNode.
通过CustomerImportNode2添加了另一个测试，它将自定义导入节点功能放在目标文档上。它确实克隆了元素，但事件没有保留。出现我只是要做一个特例。
Added another test byCustomImportNode2 which puts the custom import node function on the target document. It does make a clone of the elements, but the events are not kept. Appears I'm just going to have to make a special case.
另一个使用角度的示例几乎可以正常工作。打开窗口，复制内容，并在$ compile上失败。我认为这是因为它试图使用导入或采用节点作为ngInlcude。
Another example using angular that almost works. Opens the window, copies the content, and fails on the $compile. I assume it's because its trying to use import or adopt node for the ngInlcude.
问题
我正在尝试将元素从当前窗口移动到页面打开的新窗口。以下方法适用于除IE和Edge之外的所有浏览器。 Edge抛出没有这样的接口支持错误并且IE抛出一般错误。
这篇文章指出问题是它试图从文档片段添加多个元素。但是，在我下面的测试代码中，我只添加一个元素，但它仍然失败。有趣的是它在 importNode 和 adoptNode 调用时也失败了。是否有任何变通方法可以保留附加的数据和监听器？
I'm trying to move elements from the current window to a new window that the page opens. The methods below work in all browsers except IE and Edge. Edge throws a No such interface supported error and IE throws a generic error.
This post states that the problem is that it's trying to add multiple elements from a document fragment. However, in my test code below, I'm only adding one element and it's still failing. What's interesting is that it also fails on the importNode and adoptNode calls. Are there any workarounds that keep the attached data and listeners?
<!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>
编辑
我已经尝试了这篇文章。他们没有解决问题。
I have tried the items listed in this post. They do not solve the issue.
- 该页面是从服务器提供的。
- I已将
about：blank替换为空白字符串和同一服务器上可视空白HTML页面的URL。两者都没有解决问题。 - IE始终处于标准模式。 adoptNode和importNode从未定义过。他们抛出没有这样的界面支持错误。
- The page is being served from a server.
- I have replaced the
about:blankwith both a blank string and a URL to a visually blank HTML page on the same sever. Neither solved the issue. - IE was always in standards mode. adoptNode and importNode were never undefined. They threw "No such interface supported" errors.
编辑2
< a href =http://plnkr.co/edit/gCDEswwyEy1YVwJz6V4V =nofollow noreferrer> Plunker测试，带有上述编辑。 注意：在IE 11中，Plunker给出的错误与我服务器上运行的代码不同。 Plunker抛出一个不支持的方法错误。
Edge仍然抛出没有这样的接口支持错误
EDIT 2
Plunker test with the above edits. NOTE: The Plunker gives me a different error in IE 11 than the code running on my server. The Plunker throws a method not supported error.
Edge still throws the No such interface supported error
推荐答案
解决方案并不漂亮。您需要编译它，获取HTML内容，删除所有出现的ngInclude，将其包装在DIV中，将HTML字符串附加到新窗口，然后再次编译。
The solution isn't pretty. You need to compile it, get the HTML content, remove all occurrences of ngInclude, wrap it in a DIV, append the HTML string to the new window, and compile it again.
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);
这篇关于在IE和Edge中，在子窗口上调用adoptNode和importNode失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
