IFrame in app and event propagation | Community
Skip to main content

IFrame in app and event propagation

  • January 13, 2021
  • 2 replies
  • 0 views
R

I have a Zendesk app, where the HTML basically is just a div around an IFrame. My problem is that events like click and scroll seemingly randomly are being captured by the iframe container and not the contents. Of course this means that when you click something on the app, the iframe contents don't receive the click, so nothing happens. It happens pretty infrequently, and nothing I am doing seems to be triggering it, and then it stops seemingly randomly as well. Sometimes it happens when the app is "doing stuff", sometimes when the code is totally idle. I have no way to consistently reproduce other than just refreshing my app like 15 times.

I have tried to reproduce this outside of Zendesk by just creating a standalone app with an iframe containing my apps iframe, to see if it's just something weird with nested iframes and everything works fine. The issue seems to only happen in Zendesk. The issue also only seems to happen in cromium based browsers(edge, chrome), or at least it does not seem to happen in firefox.

Whenever this happens(container captures events and not contents), watching network traffic, every click creates a request in Zendesk to an endpoint /embeddable_blip and it looks like it's sending some base64 encoded analytics information about the click. I'm not totally convinced that this is something that Zendesk is doing(but I can't get it to break anywhere else, so I have some suspicion). Trying to figure out how Zendesk is adding event handlers and propagating/bubbling events in their minified code is apparently beyond my abilities. I have other zendesk apps with pretty much just an iframe as the contents and have not seen this problem before, and I can't imagine I'm the only one that does that, so it's also probably something in my code but I have no idea. 

Any help or suggestions would be greatly appreciated.

 

Thanks, Robert.

 

 

 

    2 replies

    F

    Well, I don't think events bubble up from inside of iframes so I'm not sure there's much you can do about it, aside from preventing scroll on the page all together (which, you can't actually do using event.preventDefault() in a scroll event listener). It's funky browser behavior that cause the top level window to scroll when the iframe has no more room to scroll.

      R
      • Robert49
      • Author
      • January 14, 2021

      It's not that events are not bubbling up from the iframe, it's that they are being captured on the div containing the iframe, rather than the content of the iframe itself(and it's not from clicking a border or something). This means when you click or scroll, nothing happens at all because, so the app apears frozen. This happens only sporadically, it doesn't seem to have anything to do with with scroll bar position or where you're clicking. 

      What's suspicious is that if I add an event handler on the div containing the ifame that logs clicks, I can see that zendesk is also capturing those events when things go bad. When things go bad, clicks are being captured by zendesk and  every click send a request to /embeddable_blip. As soon as Zendesk stops capturing the clicks(clicks don't make a request to embeddable_blip when I click), then they properly are handled by the iframe and not it's container.

      Also creating a standalone application with just just nested iframes containing my "app" works perfectly. So I highly suspect there's something in Zendesk that causing this behavior, but again I don't actually know what's wrong. 

       

      Terms & ConditionsCookie settingsAccessibility statement