#2862 Accessing DOM inside html object tag

Andy Johnson Thu 11 Nov 2021

I'm having trouble trying to access the dom inside an object tag that I'm using to load an SVG. I tested using an iframe instead and it works as expected - I can access and modify the SVG elements. I'm not sure if this is not supported or if I'm just going the wrong way about it?

I create an object and an iframe like so:

<object data="https://.../my.svg" type="image/svg+xml" id="myObject">
<iframe src="https://.../my.svg" id="myIframe">

After page load I can access the svg DOM in js using e.g.

objectDom = document.getElementById("myObject").contentDocument;
iframeDom = document.getElementById("myIframe").contentWindow.document;

I have tried the following in Fantom and the iframe works as expected, but the object throws the error sys::Type.toFanType: Not a Fantom type: [object XMLDocument]

myObject.onEvent("load", false) |e| {
    Doc d := e.target->contentDocument //throws error "Not a Fantom type: [object XMLDocument]"
    Elem svg := d.querySelector("svg")

myIframe.onEvent("load", false) |e| {
    Win w := e.target->contentWindow //
    Doc d := w.doc                   //works
    Elem svg := d.querySelector("svg")

Any pointers on how/if I can achieve this?

andy Thu 11 Nov 2021

So you want to access the inner DOM from the external window scope?

A quick look at the code and I don't think we are mapping that today - so we'd need to add a method or two to get it working. I'll open this as a ticket to track.

In the meantime you can use a native peer method to work around this.

andy Thu 11 Nov 2021

Ticket promoted to #2862 and assigned to andy

Andy Johnson Fri 12 Nov 2021

Thanks Andy, got it working with a native peer :)

Login or Signup to reply.