Geek Answers Handbook

Frameset + cols IE10

I tested several scripts in IE10, it seems that the browser has problems setting the cols attribute.

Example:

 parent.middle.document.getElementById("middle_frames").cols = "0,*"

This works perfect for SAF / Chrome / FF / IE7 / IE8 / IE9, but it does not work in IE10.

Anyone with some help?

I cannot show my problem in my project, but I made a dummy script to show you the problem. Make 3 files (these below) and run them in IE10 and click the "change cols" button. Works perfect for every browser except IE10. In my example, you see that I used doctype, I also tried without doctype, the same problem.

frameset_main.html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Framesets</title> </head> <frameset id="framesets" cols="200,*" frameborder="0" border="0" framespacing="0"> <frame src="frame1.html" name="frame1" id="frame1" scrolling="vertical" noresize="noresize"> <frame src="frame2.html" name="frame2" id="frame2" scrolling="vertical" noresize="noresize"> </frameset> </html>

frame1.html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Frame 1</title> </head> <body style="background-color: green;"> </body> </html>

frame2.html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Frame 2</title> <!-- ONPAGE JAVASCRIPT --> <script type="text/javascript"> function dothis(){ parent.document.getElementById("framesets").cols = "500,*"; } </script> </head> <body style="background-color: red;"> <div id="main_container" class="cls_main_container"> <input type="button" id="btn_do_this" onclick="dothis();" value="change cols" /> </div> </body> </html>
+7
source share
8 answers

It seems to me that the following works (something like Raads fix)

 parent.document.getElementById("framesets").cols="0,24%,*"; parent.document.getElementById("framesets").rows=parent.document.getElementById("framesets").rows; //IE10 bug fix
+10
source

It looks like IE 10. There is no permission yet.

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/dd6bdecf-5751-4343-8cfd-bcfd7a14b144

+5
source

I found a solution

(this is a temporary solution until Microsoft resolves the IE 10 error):

After working with .cols I call a script that forces us to redraw the frame, in your example, the result should look like this:

 parent.document.getElementById("framesets").cols = "500,*"; $('#frame2').forceRedraw(true);

forceRedraw script can be found here: Howto: force redraw / redraw browser and need jQuery link to work.

+2
source

I have the same problem in IE10. It worked in IE8 and IE9, and it also works in IE11 preview. So this is IE10 error.

My simplest workaround is a single line, does not require plugins or an additional function and looks like this:

 $('#framesetId').hide().attr('cols', '50,*').show();

This solution works for me in IE10 and still works in all other modern browsers.

+1
source

I spent a lot of time on this. I wanted this to be resolved without the need for jQuery.
Use this code for Internet Explorer 10 to take effect when changing cols:

 parent.document.getElementById("framesets").removeAttribute("cols"); parent.document.getElementById("framesets").setAttribute("rows", "500,*"); parent.document.getElementById("framesets").removeAttribute("rows"); parent.document.getElementById("framesets").setAttribute("cols", "500,*");
0
source

Here's what worked for me ...

The redraw method described above by Emanuel is the right solution. However, the reference plugin is no longer available on the jQuery plugin site.

Here is what worked for me to get IE10 to set the column attribute of the frame ...

1) Create a small jQuery plugin that instantly hides and shows the element, effectively redrawing it.

 (function ($) { $.fn.redrawFrame = function () { return $(this).each(function () { $(this).hide(); $(this).show(); }); } })(jQuery)

2) Link to it in JavaScript as follows:

 $('#framesetId').attr('cols', '50,*').redrawFrame();
0
source

I solved this IE10 error by adding these lines after the cols attribute update line (using jquery):

$('#yourframeid').height( $('#yourframeid').height()+1 ); $('#yourframeid').height( $('#yourframeid').height()-1 );

I hope this works for you ...

0
source

I resolved this, i.e. 10 mistakes after a little research. I found that only the "cols" attribute does not work for iframes, but the "rows" attribute works, so I added a row and it worked for me.

 var frameSet = document.getElementById("uxResultsFrameset"); if ($.browser.msie && $.browser.version == 10) frameSet["rows"] = "100%"; //sets a row to overcome the issue in case of ie10 only frameSet[orient] = "50%,50%";
0
source

More articles:


All Articles