Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript Java IE9 IE10 , +
[****GO TO END OF THE POST TO SEE THE UPDATED PART****]
Peace be upon you!
 
We have a huge HMI and SCADA web application which provides data collection facility from almost any plant floor and provides visualization and analysis facility over it.
 
The product is based on three technologies. Front end and server side is in JS, JAVA and database engines are in C++ connected via JNI.
 
In the front end, we have practically used HTML, CSS and JS to create our own windowing environment. Every window is an iFrame in which we dynamically load an applet. So the web application runs Java applet code in HTML iframes in a windowing environment with all the windowing environment features applied (like dragging, closing, opening multiple windows etc)

The product has been running absolutely perfect in IE9 and earlier version. However, as soon as we upgraded IE 10, we have been facing serious problems. Some are related to functions/properties in JS that are not supported in IE10.
 
Majorly we digged and fixed these issues in IE10:
 
Many methods are no more accessible without 'this' pointer in JS: We added 'this' pointer to resolve it
element.getAttribute("style") is not supported in IE10. We used the alternative document.style to get it done
However, after these small fixations, we have ommitted all the JS/HTML exceptions but the web page doesn't display itself properly. We consultant MSDN IE 10 compatibility cookbook and a lot of other forums to understand that if a webpage isn't following standards, then the possibility of the webpage not displaying itself correctly is high as IE10 imposes strict standards.
 
We added doctype and metainf tags in all HTMLs so that our browser mode in F12 developer tools is IE10 and document mode is IE9 standards but still no improvement.
 
Its been around a month we are searching on this issue. Reading documents, support, and problems with IE10 but couldn't really locate the real problem.
 
Desperately seeking help.
 
Thanks in advance.
 
Page should be displayed as follows:
http://www.flickr.com/photos/zakiimtiaz/8701914114/in/photostream[^]
 
Page displayed incorrectly is as follows:
http://www.flickr.com/photos/zakiimtiaz/8700789569/in/photostream[^]
 

Same question asked at http://stackoverflow.com/questions/16274535/cant-open-display-my-web-application-properly-in-ie-10?5[^] but couldn't really help. See comments on this page for more information.
 
****UPDATED PART HERE****
 
Interestingly, I have worked this example by braking in it a very small part and found out the problem.
 
In IE10, if an <iframe> is present inside a , the height width attributes of an Iframe given in percentage doesn't pay much heed to the height width of its parent.
 
Like in the following example, iFrame with the id 'test' takes height width = 100%. While its parent's height is 1px. *When you run this in IE10, the frame appears to be very large in height and shoes anomolous behavior*
 

 
<HTML>
    <HEAD>
    
    
    </HEAD>
    <BODY id="WESWinDesktop"  >
    <table id=WESStructure width="100%" height="100%" border="2" cellpadding="0" cellspacing="0">
    <tr>
    	<td id="WESMainWinTitleBarCont" height="1px">		this is 'td' for iframe
    			<iframe  id="test" src="" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
    	</td>
      </tr>
    
      <tr>
    	<td id="WESMainWinMenuBar" height="20">		menu bar
    	</td>
      </tr>
      <tr>
    	<td height="100%" >content
    		
    	</td>
      </tr>
      <tr>
    	<td id="WESMainWinStatus" height="20">	status bar
    	</td>
      </tr>
    </table>
    
    </BODY>
    </HTML>
 
I have tried the same thing by putting a
instead of a
but the behavior is the same. So I guess there is something wrong IE10 interprets width height attributes of an iframe.
 
Much Help needed guys!
 
Thanks in advance.
Posted 2-May-13 3:03am
Edited 17-May-13 2:51am
v2
Comments
vbmike at 8-May-13 20:30pm
   
Your picture links wont open they are labeled private.
Zaki Imtiaz at 9-May-13 1:28am
   
Now its public. Thank you for pointing out.
Shubhashish_Mandal at 17-May-13 8:27am
   
Issue is with the height(in %). Once the page loaded you have to resize the iframe. You have to set the iframe height(in px) with its container height. The iframe flicked for a second before it gets sized to the screen.
Zaki Imtiaz at 17-May-13 8:38am
   
Alright. I set the value of the <iframe> height attribute in px after the page loaded according to its parent <td> and it solved the problem.
 
My question is, why doesn't IE10 behaves correctly in this regard without I using some javascript as IE9 or IE8???
 
However, I wonder one thing. I have extensively used many iframes in the actual code and if this is the only solution available, I am thinking of adjusting all the (dynammically) created iframes according to their parents' dimensions which is a hectic and messy thing.
Shubhashish_Mandal at 17-May-13 8:46am
   
I agree with you, sometimes IE does not behave as expected and it differ from version to version
Amitosh Swain at 17-May-13 21:46pm
   
Well it works fine for me in IE10 on w7 sp1 32 bit.
See if you have quirks mode enabled in f12 developer mode. If yes then switch to standards mode. that shall solve all problems. this is a remnant of ie6 era bug.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web01 | 2.8.1411022.1 | Last Updated 17 May 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100