Description
For our application we need to work with DOM elements inside iFrame.
Because DART does not allow cross-frame access even if window use same origin I must make little hack:
In DART:
//define JS function:
@JS("replaceElementInIframe")
external bool _replaceElementInIframe(frameSelector, elementSelector, newelement);
//make element:
var div = new html.DivElement();
// call JS
_replaceElementInIframe(iFrameSelector, innerDivSelector, div);
In JS function do something like this:
window.replaceElementInIframe = function (frameSelector, elementSelector, newelement){
// select iframe
var frame = document.querySelector(frameSelector)
// select document
var doc = (frame.contentWindow ? frame.contentWindow.document : frame.contentDocument);
// select element inside iframe
var foundedElement = doc.querySelector(elementSelector);
// replace element inside iframe by element given as argument from DART
foundedElement.parentNode.replaceChild(newelement, foundedElement);
return true;
}
In DART 1.13 and before
After I call _replaceElementInIframe I can take from div his ownerDocument without error and work with it as I want. For example insert other nodes to it, listen events ...
In DART 1.14 and above (1.15.0-dev.4.0 (ref 43e12db))
When I try to read ownerDocument from div, DART throws exception:
type 'JsObjectImpl' is not a subtype of type 'Document' of 'function result'.
(Same error is thrown if I try to read div.parentNode)
I try to use package:js and dart:js with same result. (with dart:js is little different code)
This is very limiting for us, because we cannot upgrade from DART 1.13 where are some other bugs which may be repaired in 1.14