Question

如果我把iframe放在没有“display：none”的谷歌地图上，它会正确显示，但是当我在css类中添加display：none然后我用jquery删除它时，带有地图的iframe不显示。

HTML：

<div id="kontakt_siedziba">

        <iframe id="mapa_siedziba" class="hidden" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10163.095243410511!2d16.666852538623033!3d50.44531365108525!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3d08e591f3fac383!2sJatax+Sp.+z+o.o.!5e0!3m2!1spl!2spl!4v1466029556470" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

        </div>

CSS：

  iframe#mapa_siedziba {
                float: right;
            }

    .hidden {
                display: none;
            }

#kontakt_siedziba, #kontakt_baza {
            height: 140px;
            border: 0px solid #007fff;
            border-radius: 5px;
            transition: padding 1s;
        }

.unfolded_map {
            padding: 20px;

        }

脚本：

<script>

    var clicked=0;
    $(document).ready(function(){

        $("#siedziba").click(function(){
            if(clicked==0){

            $("#kontakt_siedziba").addClass("unfolded_map").animate(
                {height: '300px',borderWidth: '4'},
                function(){ $("#mapa_siedziba").fadeIn(500, function(){
                    clicked=1;

                }); } );

            }else if(clicked==1){

                $("#mapa_siedziba").fadeOut(1000, function(){

                    $("#kontakt_siedziba").animate(
                        {height: '140px',borderWidth: '0'},
                        function()
                        {
                            clicked=0;
                        }).removeClass("unfolded_map") ;

                });

            } 
        });

    });
</script>

我也试过removeClass而不是淡入淡出，但它不起作用

Answer 1

您可以尝试两种方式：

将iframe包装到div中并隐藏/取消隐藏div
删除iframe dom元素并将其读取

实施例

http://example.com/babycare/testimonial/cat/1

删除display：none后，Internet Explorer 9（8？）iframe未显示

1 个答案: