Scriptaculous 外观效果将 Google 地图移到可见 iframe 区域之外答案

【问题标题】：Scriptaculous Appear effect shifts Google Map outside visible iframe areaScriptaculous 外观效果将 Google 地图移到可见 iframe 区域之外
【发布时间】：2011-02-23 18:11:34
【问题描述】：

首先，我在这个项目中使用 Wordpress，但我认为这个问题与 WP 无关。

我正在使用一个名为 Local Market Explorer 的 WP 插件，该插件插入一个 iFrame，其中包含 Google 地图和当地设施信息，即餐馆。 iFrame 和内容由Walkscore.com 通过其 API 提供服务。

我想使用 Scriptaculous Appear 效果淡化页面的容器 div。此效果需要在页面上使用内联 CSS 为容器 div 设置“显示：无”。但是，一旦包含地图的 iFrame 淡入，包含在 iframe 中的地图就会移出 iFrame 显示。删除“display:none”或设置“display:inline”会使 iFrame 返回到正确的地图显示，但会使 Appear 效果失效。

我怀疑地图移动到 iframe 的显示边界之外，而不是因为出现水平滚动条而简单地不显示。当地图正确显示时，它有一个垂直滚动条，但没有水平滚动条。

让我感到困惑的是，Scriptaculous 淡入淡出在名为Stereotabs 的选项卡式内容脚本中实现得很好。选项卡内容淡入而不影响地图显示。然而，我注意到 Stereotabs 代码没有使用内联 CSS 来实现 Appear 效果。 Stereotabs js 代码可通过前面的链接获得。使用带有内联 CSS 的 Scriptaculous Appear 可以使地图移动，无论 Stereotabs 是否处于活动状态。

我的问题是：为什么使用内联 CSS 将显示属性设置为“无”会导致 Scriptaculous 干扰 iFramed Google 地图内容？所有其他 iFramed、ummapped 内容（即 Yelp、Schools、Zillow 统计数据等）都正确显示。

代码如下，但由于 WP-shortcode，我不知道它会有多大用处。请原谅我无法提供完整的代码...这是使用 Wordpress 的众多缺点和烦恼之一。

<html>
<head>
<script src="http://www.mysite.com/wp-includes/js/prototype.js"></script>
<script src="http://www.mysite.com/wp-includes/js/scriptaculous/scriptaculous.js"></script>
</head>
<body>
<script type="text/javascript">
   window.onload = function () {
        new Effect.Appear('content-wrap', {delay:1.0});  
   }
</script>
<div id="content-wrap" style="display: none">

<?php echo do_shortcode('[lme-module module="walk-score" zip="30312"]'); ?>

</div>      
</body>
</html>

感谢您的帮助。

范

【问题讨论】：

标签： google-maps iframe wordpress scriptaculous

【解决方案1】：

在多个浏览器上的多个 ajax 框架（我对 jquery 也是如此）遇到此问题。

我认为这是谷歌地图的问题。

【讨论】：

谢谢...我担心只有我一个人。这不是我在原型和脚本方面遇到的唯一怪癖。