I'm adding a chat feature to a couple of our websites. The chat will connect users with people at our help desk to help them use the websites. Our help desk folks want the chat window to appear like a tab on the side of the page and slide out, rather than popping up in a new window. However, I want to allow the user to navigate around the site without losing the chat.

To do this, I've been trying to move the entire page into an iframe once the chat starts (with the chat outside the iframe), so the user can navigate around the site within the iframe without losing the chat.

I used this answer to get started, and that works great visually. However, some of the javascript in the background breaks.

One of the sites is ASP.NET web forms. The other is MVC. I've been working with the web forms one first. Stuff like calling __doPostBack breaks once the page is moved into the iframe since the javascript context is left behind.

Once the user clicks on a link (a real link, not a __doPostBack) and the iframe refreshes, then everything works perfectly.

How I see it, I have a few options:

  1. Copy all javascript variables from window.top into the iframe somehow. Hopefully without having to know all the variable names. I tried this.contentWindow.__doPostBack = window.top.__doPostBack, which works, but other variables are missing so it ultimately fails:
  2. Somehow switch the iframe's context to look at the top window context, if that's even possible? Probably not.
  3. Another thought was to not move the page into an iframe right away, but to wait until the page changes and then load the new page into a new iframe. But I'm not sure how to hook into that event and highjack it.
  4. Something else?

These are sites for use by our employees only, so I only have to support IE11 and Chrome.

Related posts

Recent Viewed