检测 div 大小变化在 IE 中不起作用

发布于 2024-11-05 09:58:07 字数 1344 浏览 1 评论 0原文

我这里有一个小谷歌地图应用程序： http://crocdoc.ifas.ufl.edu /projects/saveyourlogo/map/

此页面正在通过 iframe 嵌入到此页面上的“操作”选项卡中：http://saveyourlogo.org/en/programs/crocodile/american-crocodile/

由于该页面以设置为 display:none 的“Actions”内容 div 开头，因此我的地图 div (#map_canvas) 开始时大小为 0x0，并且地图无法正确初始化。 Google Maps API 表示只需使用 google.maps.event.trigger(map, 'resize');一旦你的地图 div 调整大小。

由于我无法控制小地图 iframe 之外的任何内容，因此我无法将调整大小功能附加到“操作”按钮。所以我试图检测 #map_canvas div 大小的变化，然后触发调整大小函数。由于（我相信）您通常无法将调整大小事件附加到 div，因此我使用了 Ben Alman 的 jQuery 调整大小事件脚本。（StackOverflow 不允许我发布两个以上的链接，但很容易在 Google 上搜索到它。）据说它可以与 IE8 一起使用，而且我已经看到他网站上的示例是可以的。

它在 Firefox 中完美运行，但在 IE8 中根本不会触发调整大小事件。（当我取消注释宽度警报时，它不会在 IE8 中显示。）

function reset_map() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center); 
    map.setZoom(zoom);
}


$('#map_canvas').resize(function() {    
//  alert(document.getElementById('map_canvas').offsetWidth);
    reset_map();
});

知道为什么吗？或者也许有更优雅的解决方案的建议？

更新：我尝试构建自己的小脚本，每 300 毫秒获取 div 的 offsetWidth，然后将其与上一个进行比较，但最终导致浏览器崩溃。有没有办法在不使用恒定、快速循环的情况下检测从 display:none 到 display:block 的这种变化？我知道上面提到的 Ben Alman 脚本每 250 毫秒使用一次。

原文

I have a little Google Map app here: http://crocdoc.ifas.ufl.edu/projects/saveyourlogo/map/

This page is being embedded into the "Actions" tab on this page via iframe: http://saveyourlogo.org/en/programs/crocodile/american-crocodile/

Since that page begins with the "Actions" content div set to display:none, my map div (#map_canvas) starts out at size 0x0 and the map can't initialize properly. The Google Maps API says to simply use google.maps.event.trigger(map, 'resize'); once your map div is resized.

Since I don't have control of anything outside my little map's iframe, I can't attach the resize function to the "Actions" button. So I'm trying to detect a change in the #map_canvas div's size, and then fire the resize function. Since (I believe) you can't normally attach a resize event to a div, I've used Ben Alman's jQuery resize event script. (StackOverflow isn't letting me post more than two links, but it's easily Googled.) It is said to work with IE8, and I've seen that the examples on his site do.

It works perfectly in Firefox, but the resize event doesn't fire at all in IE8. (When I un-comment out the width alert, it does not display in IE8.)

function reset_map() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center); 
    map.setZoom(zoom);
}


$('#map_canvas').resize(function() {    
//  alert(document.getElementById('map_canvas').offsetWidth);
    reset_map();
});

Any idea why? Or perhaps suggestions for a more elegant solution?

UPDATE:
I've tried building my own little script that takes the offsetWidth of the div every 300ms, and then compares it to the last, but I just end up crashing the browser. Is there any way to detect this change from display:none to display:block without using a constant, quick loop? I know Ben Alman's script mentioned above uses one every 250ms.

分享到QQ

分享到微博