通过 select 更改 div 内容的脚本在 Firefox 中不起作用

Question

我的代码的目的是使 div 可见，它与我选择的 select 选项具有相同的 ID。但是还有更多的东西。要使可见的 div 有一个 iframe，必须调整其大小以适应内容。每个 iframe 包含一个 Excel sheet（在 htm 扩展中）。我粘贴了我所有的代码，包括调整大小的功能。这在 Chrome 和 Opera 上完美运行，但在 IE 和 FF 上运行不佳运行。

当我 select 一个新的 div 时出现问题。在 Chrome 和 Opera 中，当我更改 select 选项时，我看到新的 iframe 正确调整了大小，但在 IE 和 FF 中我看不到任何东西。我已经检查过 select 编辑的 div 的显示属性设置为阻塞，因为它可能是 jQuery 或调整大小功能的问题。

我花了很多时间试图修复它，但我仍然找到了解决方案。

有我的代码：

CSS:

#sheetsContainer div{display: none;}

HTML:

<select id="sheets">
    <option value="sheet1">Sheet 1</option>
    <option value="sheet2">Sheet 2</option>
</select>


<div id="sheetsContainer">
    <div id="sheet1">
        <iframe frameborder="0" onload='javascript:resizeIframe(this);' src="indicadors/2014/1_3_4.htm"></iframe>
    </div>
    <div id="sheet2">
        <iframe frameborder="0" onload='javascript:resizeIframe(this);' src="indicadors/2014/1_3_4_183.htm"></iframe>
    </div>
</div>

JS/jQuery:

    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
        obj.style.width = "100%";
    }

    $("#sheets").change(function(){
        $("#" + this.value).show().siblings().hide();
    });

    $("#sheets").change();

这是一个测试，因为我的真正目的是使用 bootstrap 的选项卡面板而不是下拉菜单 select。我想尽量减少问题，让您更容易理解。事实上，Chrome 和 Opera bootstrap 的选项卡也可以，但它不适用于 IE 和 FF。

感谢大家的帮助！

编辑：

对于 FF 和 IE，我只能看到 selector 的第一个 div。当我切换到另一个 div 时，我什么也看不到，但是如果我再次切换到第一个 div，我就能很好地看到它。在我的代码中，我可以看到 'sheet1' 但看不到 'sheet2'。如果我用 'sheet2' selected 刷新页面，现在我可以看到 sheet2，但是如果我切换到 sheet1，我什么也看不到。

你可以在 https://gpaq.upc.edu//lldades/2014/indicador.asp?index=1_3_4 看到我有什么。将其与 Chrome 和 FF 进行比较以查看问题 ;)

Answer 1

虽然在 IE 和 FF 中分配宽度，但我认为您应该考虑在 pixels.For 示例中分配它，如果 window 的 100% 是 1280 px，则将宽度分配为 1280px 而不是 100 %。我不确定这是否适合您，但它确实对我有用过一次。

Answer 2

对于 Firefox，您需要给它一点时间来加载 iframe。推荐如下：

function resizeIframe(obj) {
    setInterval(function(){resizeIframeNow(obj);},3000); // wait around 3 seconds
}

function resizeIframeNow(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight;
    obj.style.width = "100%";
}

我希望删除 scrollHeight 后的 + 'px'。

对于 IE，我建议使用 window.frameElement（iframe 父级）对象从 iframe 的 HTML 内容调用调整大小函数在你的情况下 HTML 结束时可能 1_3_4_183.html:

....
<script>

var h = document.getElementsByTagName("body")[0].scrollHeight + 30; // add 30 to prevent scrollbar from appearing
window.frameElement.height=h;

</script>

</body>

但要使 IE 正常工作，您仍然需要稍微更改 iframe 设置：

来自

<iframe frameborder="0" onload="javascript:resizeIframe(this);" src="./Llibre de dades_files/1_3_4.html" style="height: 7718px; width: 100%;"></iframe>

到

<iframe frameborder="0" scrolling="auto" onload="javascript:resizeIframe(this);" src="./Llibre de dades_files/1_3_4.html" height="7718" width="100%"></iframe>

如果您为 IE 定义样式，大小将固定在该大小并且将忽略任何试图更改它的脚本。

如果浏览器是IE，还需要告诉resizeIframe()绕过:

var ie = (navigator.userAgent.indexOf("MSIE") != -1);

function resizeIframe(obj) {
    if (!ie) {
        setInterval(function(){resizeIframeNow(obj);},3000); // wait around 3 seconds
    }
}

function resizeIframeNow(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight;
    obj.style.width = "100%";
}

希望对您有所帮助！

通过 select 更改 div 内容的脚本在 Firefox 中不起作用

Script that changes content of a div throught a select doesn't work in Firefox

javascript

firefox

jquery

internet-explorer