Javascript google maps iframe在safari中不动态工作(自动显示隐藏),但在google chrome中工作

Javascript google maps iframe在safari中不动态工作(自动显示隐藏),但在google chrome中工作,javascript,html,google-maps,iframe,safari,Javascript,Html,Google Maps,Iframe,Safari,我提到了一些与iframe不在safari中工作有关的问题。这些答案建议使用iframe的替代品(Ajax或jQuery作为iframe的替代品)。但是我已经开发了这个网站,没有在safari中进行测试。我不想在最后的开发阶段更改实现 问题: 我正在尝试将谷歌地图iframe集成到我的网页中。 网站会根据窗口大小进行相应的更改。潜水艇是 最初在adobe回流中编码。使用我插入的边动画 将html文件保存到这些div中。 问题在于,当我尝试调整谷歌地图的大小时 第页,移动站点上的div仍然显示在桌

我提到了一些与iframe不在safari中工作有关的问题。这些答案建议使用iframe的替代品(Ajax或jQuery作为iframe的替代品)。但是我已经开发了这个网站,没有在safari中进行测试。我不想在最后的开发阶段更改实现

问题: 我正在尝试将谷歌地图iframe集成到我的网页中。 网站会根据窗口大小进行相应的更改。潜水艇是 最初在adobe回流中编码。使用我插入的边动画 将html文件保存到这些div中。 问题在于,当我尝试调整谷歌地图的大小时 第页,移动站点上的div仍然显示在桌面上 反之亦然。这仅在Safari浏览器上发生。 这是我在edge动画中使用的代码

var container = sym.$('mapBox');

var map = '<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2595.2028231859395!2d7.7518645!3d49.4239794!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47966d5189fba81f%3A0x8ab04632090ea019!2sTU+Kaiserslautern!5e0!3m2!1sen!2sde!4v1432133191497"
width="'+container.width()+'" height="'+container.height()+'"
frameborder="0" style="border:0"></iframe>';

container.html(map);
var container=sym.$('mapBox');
var-map='';
html(map);
这是html页面

</head>
    <body>

    <div id="primaryContainer" class="primaryContainer clearfix">

        <div id="Video" class="clearfix">
            <div id=“mapdiv_Stage" class=“EDGE-MAPDIV">
            <div id="Logo" class="clearfix">
                <div id="logo_Stage" class="EDGE-LOGO">
</div>
            </div>
            <div id="N" class="clearfix">
                <div id="n_Stage" class="EDGE-N">
</div>
            </div>
            <div id="E" class="clearfix">
                <div id="e_Stage" class="EDGE-E">
</div>
            </div>
            <div id="T" class="clearfix">
                <div id="t_Stage" class="EDGE-T">
</div>
            </div>
            <div id="R" class="clearfix">
                <div id="r_Stage" class=“EDGE-R">
</div>
            </div>
            <div id="M" class="clearfix">
                <div id="m_Stage" class="EDGE-M">
</div>
            </div>
            <div id="S" class="clearfix">
                <div id="s_Stage" class="EDGE-S">
</div>
            </div>
            <div id="M" class="clearfix">
                <div id="m_Stage" class="EDGE-M">
</div>
            </div>
            <div id="I" class="clearfix">
                <div id="i_Stage" class="EDGE-I">
</div>
            </div>

            </div>

        <div id="bigsocial" class="clearfix">
            <div id="youtube" class="clearfix">
                <div id="youtube_Stage" class="EDGE-YOUTUBE">
</div>
            </div>
            <div id="instagram" class="clearfix">
                <div id="instagram_Stage" class="EDGE-INSTAGRAM">
</div>
            </div>
            <div id="googleplus" class="clearfix">
                <div id="googleplus_Stage" class="EDGE-GOOGLE">
</div>
            </div>
            <div id="wiki" class="clearfix">
                <div id="wiki_Stage" class="EDGE-WIKI">
</div>
            </div>
            <div id="twitter" class="clearfix">
                <div id="twitter_Stage" class="EDGE-TWITTER">
</div>
            </div>
            <div id="facebook" class="clearfix">
                <div id="facebook_Stage" class="EDGE-FACEBOOK">
</div>
            </div>
            </div>
        </div>
        <div id="Tablet" class="clearfix">
          <div id="tab_Stage" class="EDGE-Tab">
</div></div>

        <div id="smallsocial" class="clearfix">
            <div id="Facebook1" class="clearfix">
                <div id="facebook3_Stage" class="EDGE-FACEBOOK3">
</div>
            </div>
            <div id="Twitter2" class="clearfix">
                <div id="twitter3_Stage" class="EDGE-TWITTER3">
</div>
            </div>
            <div id="Wiki3" class="clearfix">
                <div id="wiki3_Stage" class="EDGE-WIKI3">
</div>
            </div>
            <div id="Youtube4" class="clearfix">
                <div id="youtube3_Stage" class="EDGE-YOUTUBE3">
</div>
            </div>
            <div id="Instagram5" class="clearfix">
                <div id="instagram3_Stage" class="EDGE-INSTAGRAM3">
</div>
            </div>
            <div id="googlelus6" class="clearfix">
                <div id="google3_Stage" class="EDGE-GOOGLE3">
</div>
            </div></div>

        </div>

    </body>
</html>


那么你看了两次这个部门?我加上了这个图像。你可以看到这个问题。为什么不使用媒体查询?网站的许多部分都有iframe。尝试在整个网站中使用与其他页面相同的标准。