Frameset + cols IE10

2019-03-27 13:31发布

I was testing some scripts in IE10, seems that the browser has problems in setting attribute cols.

Example:

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

This works perfect for SAF/Chrome/FF/IE7/IE8/IE9, but in IE10 it doesn't work.

Anyone with some help?


I can't 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 button "change cols". Works perfect for every browser except IE10. In my example you see I used a doctype, tried also without a doctype, 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>

8条回答
Evening l夕情丶
2楼-- · 2019-03-27 14:16

Here's what worked for me...

The redraw method that Emanuele describes above is the right solution. However, the referenced plugin is no longer available at the jQuery plugin site.

Here's what worked for me to force IE10 to set a frame column attribute...

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

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

2) Reference it in your JavaScript as follows:

$('#framesetId').attr('cols', '50,*').redrawFrame();
查看更多
做个烂人
3楼-- · 2019-03-27 14:17

I resolved this ie 10 bug after a bit research. I found that only 'cols' attribute is not working for iframes but the 'rows'attribute is working, 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%";
查看更多
登录 后发表回答