iframe question

[envo]

I currently have an HTML5 responsive design that needs to load an old version of our site while we convert.

This works, but in some instances, the button-click within the iframe (for example, updating a record, normal <button>) doesn't fire. This annoys the users obviously.

I observed what the user did and can't seem to replicate it myself. I see the button click animation (it presses the button) but nothing happens.

When the user clicks somewhere in the whitespace, or refreshes the page, it works again.

I figured maybe something on the HTML5 responsive design was taking focus away from the iframe, and built in an automatic "focus" whenever the mouse goes over the iframe. No luck.

I've asked the other developer to check his code, and also went through the code myself, and I can't figure out why it's behaving like this at random intervals. I'm using IE11 for this

Anyone have any idea what I can check or what it may be? Both are running on the same domain so it's not a cross-browser security issue

 

[Darko]

It is never a good idea to use i frames.

Wouldn't it just be easier for you to redirect visitors to the old site that's in a different sub directory?

With regards to your specific problem, if the js that is interacting with the DOM is on the new site, the old site (inside the iframe) won't bubble up any events for your new site to detect.

So, just reference your js on your old site as well.

 

[GreGorGy]

Iframes. Curse them every time I have had to use them. For those damn ie6/7/8 on XP moments. Which brings me to compatibility view in ie 11. Check and toggle those settings

 

[envo]

Will check out compatibility view maybe. Unfortunately the powers that be wants the new navigation/look and feel, but don't want to wait until we convert all of our old pages to the new look, so needs to run in parallel. So far I've been in dev for almost 12 months now. Feel I could have converted most, if not all, of the pages by now.

But you know how it is...

 

[DemonEyeS]

it could be a permissions issue between the iframe and parent, was the user running an older version of internet explorer?

 

[S1ght]

The first couple of questions that come to mind if I were trying to debug this

Define "HTML5 responsive design " ... Are you talking about media queries? If so then it's not the issue
Are there any errors in the console?
Any old js files being cached that could cause problems?
How was the click event added to the button? eg. onlick, addEventListener, jquery - .on('click',function), jquery - .click(function)
Issue isolated to this 1 user all all users?
Issue isolated to only IE or all browsers?
Compatibility settings?

 

[envo]

Just a quick update just in case there's other people searching for the same stuff.

It wasn't a permission issue since I didn't do cross-domain calls. I did have a version using HTML5's send message ability to do cross-domain calls but I figured since it's just an intranet site I can have it in the same domain and not worry about permissions.

HTML5 responsive design = Bootstrap basically. With a bunch of jQuery plugins

The issue was a long-standing bug on the older framework I was calling. The developer "try catch" the error in JavaScript and did absolutely nothing with it, so the user wasn't informed that there was actually an error on it which meant that when they clicked the button (which didn't have jquery triggers on it, it's a physical button. When I mean older framework I mean pre-jQuery days, as in nothing is modern and it's essentially .net 1.1 stuff)

Since the user doesn't know what was happening (UX is totally ignored apparently) they thought it was a bug in the new framework and/or complained about it being "slow" (slow to them means they can't work as fast and have to refresh the page whenever it happens)

Apparently it was a query string issue... *sigh*

sometimes I don't know any more. Makes me want to curl up into a little ball in the corner, cry and suck my thumb while cuddling my childhood bear.