IFrameElement EventListener not being called

Question

I have added an EventListener to an IFrameElement, but it is never being called.

Listener definition:

  EventListener eventListener = (e) {
    print("Lisenter clicked.");
  };

IFrameElement definition:

  var type = 'click';

  IFrameElement element = IFrameElement()
    ..width = (MediaQuery.of(context).size.width - 400).toString()
    ..height = MediaQuery.of(context).size.height.toString()
    ..srcdoc = value
    ..addEventListener(type, eventListener)
    ..style.border = 'none';

  ui.platformViewRegistry.registerViewFactory(
      createdViewId,
          (int viewId) => element);

dispatchEvent definition:

marker.addListener('click', function() {dispatchEvent(new Event("click"));console.log("woot");});

"woot" is found in console when a marker is clicked, but I never see "Listener clicked". What am I doing wrong?

Apparently a mouse click event doesn't work for cross domain iframe. There is a solution in the form of Gist here. https://gist.github.com/jaydson/1780598 You can try this. In my small test mouseOver event worked properly. But I couldn't recreact the click event. There are other references in stackoverflow aimed at this issue. https://stackoverflow.com/questions/6452502/adding-click-event-handler-to-iframe https://stackoverflow.com/questions/16792953/onclick-function-doesnt-fire-on-iframe — Abhilash Chandran, Aug 20 '19 at 11:52
Following way of adding event listeners could help with the clarity of listeners on your element `element.onMouseLeave.listen((evt) { mouseOver = false; print('Mosue is leaving iframe'); });` — Abhilash Chandran, Aug 20 '19 at 11:55

score 0 · Accepted Answer · answered Jan 22 '20 at 02:12

I ended up with the following:

    "marker.addListener('click', function() {dispatchEvent(new MouseEvent('click', {view: window, bubbles: true, cancelable: true }));"
        "var o = Object.create(null);"
        "o.id = \"${property.id}\";"
        ""
        "console.log(o);"
        "window.parent.postMessage(o);"
        ""
        "});\n";

Then I attach a listener on the window:

window.onMessage.listen((onData) {
  // do things
  if (messageEvent.data["id"] == property.id) { }
})

IFrameElement EventListener not being called

1 Answers1