框架集 + cols IE10答案

【问题标题】：Frameset + cols IE10框架集 + cols IE10
【发布时间】：2012-08-28 06:34:35
【问题描述】：

我在IE10中测试了一些脚本，好像浏览器设置属性cols有问题。

例子：

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

这非常适合 SAF/Chrome/FF/IE7/IE8/IE9，但在 IE10 中不起作用。

有人帮忙吗？

我无法在我的项目中显示我的问题，但我制作了一个虚拟脚本来向您显示问题。制作 3 个文件（如下）并在 IE10 中运行它们，然后单击“更改列”按钮。适用于除 IE10 以外的所有浏览器。在我的示例中，您看到我使用了 doctype，也尝试了没有 doctype，同样的问题。

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>

【问题讨论】：

你能链接到失败的演示吗？我会检查你的文档类型等——框架集不再常见，看到没有涵盖的边缘情况我不会感到惊讶。
更新了一个例子。

标签： javascript frameset internet-explorer-10

【解决方案1】：

我在 IE10 中遇到了同样的问题。它适用于 IE8 和 IE9，也适用于 IE11 预览版。所以这似乎是一个IE10的错误。

我最简单的解决方法是一行，不需要插件或附加功能，如下所示：

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

这个解决方案在 IE10 中适用于我，并且仍然适用于所有其他现代浏览器。

【讨论】：

【解决方案2】：

经过一番研究，我解决了这个 ie 10 错误。我发现只有 'cols' 属性不适用于 iframe，但 'rows' 属性有效，所以我添加了一行，它对我有用。

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%";

【讨论】：

【解决方案3】：

我通过在 cols 属性更新行之后添加这些行（使用 jquery）解决了这个 IE10 错误：

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

我希望它对你有用......

【讨论】：

【解决方案4】：

对我来说，以下似乎有效（它有点像 Raads 修复）

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

【讨论】：

我更喜欢您的解决方案，因为它是纯 javascript，不依赖于 jQuery。感谢您发布它。

【解决方案5】：

这对我有用...

Emanuele 上面描述的重绘方法是正确的解决方案。但是，引用的插件在 jQuery 插件站点上不再可用。

这就是我强制 IE10 设置框架列属性的方法...

1) 创建一个小型 jQuery 插件，可以立即隐藏和显示元素，有效地重绘它。

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

2) 在您的 JavaScript 中引用它，如下所示：

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

【讨论】：

【解决方案6】：

我花了很多时间在这上面。我想在不需要 jQuery 的情况下解决这个问题。
使用此代码使 Internet Explorer 10 对 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,*");

【讨论】：

【解决方案7】：

我找到了解决方案

（这是微软解决 IE 10 错误之前的一种解决方法）：

在处理.cols 之后，我调用了一个强制帧重绘的脚本，在您的示例中，结果应如下所示：

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

forceRedraw 脚本可在此处找到：Howto: Force a browser redraw/repaint，并且需要指向 jQuery 的链接才能工作。

【讨论】：

【解决方案8】：

看起来是 IE 10 的错误。目前还没有解决方案。

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

【讨论】：