Question

我正在为像门户网站这样的iGoogle / Netvibes构建虚拟小部件。这是一个“Google地图”小部件，因为它只渲染以特定位置为中心的地图。

小部件在所有浏览器中看起来都不错，但IE8中我没有考虑包含地图的<div>指定的高度。

以下是代码的有趣部分：

<body onload="initialize()" >

<div id="map_canvas" style="height:400px; width: 100%;"></div>

</body>

我无法控制门户网站，所以我唯一能修改的就是小部件本身。我也尝试设置<body>的高度，但同样的事情。

为什么它不能在IE中运行？

谢谢！

Answer 1

将此信息放入您使用iframe调用的页面中：

<script type="text/javascript">
    var iframes = window.parent.document.getElementsByTagName('iframe');
    for(var i = 0; i < iframes.length; i ++)
    {
        if(iframes[i].src == window.location)
        {
            iframes[i].style.height = '400px';
        }
    }
</script>

如果您在两个不同的域上，这是不可能的，不幸的是，在向最终用户直接提供<iframe>时没有其他办法。最好的解决方案是为用户提供一个脚本标记，使用<iframe>

生成document.write()标记

要提供给客户的示例脚本标记：

<script type="text/javascript" src="http://www.example.com/widget-getter.js?client=[clientid]&amp;widget=[widgetid]"></script>

上述标记将调用的脚本内容：

document.write('<iframe height="400px" src="http://www.example.com/widget.html"></iframe>');

Answer 2

您是否尝试过使用iframe代码的height属性？

IE8未考虑iframe高度

2 个答案: