1

我正在使用以下代码使用 jquery 动态调整 iframe 的大小。HTML 页面在其中加载，并且都有不同的高度。

问题：如果单击链接，则会设置 iframe 高度 - 因此，当第二个链接被点击时，iframe 首先使用前一个 html 的高度，然后缩小以适应当前链接的内容。所以我想每次点击链接时我都必须“重置”该功能。我怎样才能做到这一点？

PS：在这个http://jsfiddle.net/UWqSb/3/上它不起作用（缩小），尽管在我的页面上内容加载和动画正确。

动态调整 iframe 大小并设置动画

$("#targetIframe").load(function() {
    $("#targetIframe").animate({ height:( $("#targetIframe").contents().find("body").height())  },500);
});

使用 jquery 为 div 容器设置动画，并在单击按钮时关闭 div

$("#targetIframe").ready(function() {
        // cache elements
        var $targetDiv = $("#targetContent"),
            $iframe = $targetDiv.find("#targetIframe"),
            $close = $targetDiv.find("#myClose");

        // bind click events to first link and close button
        $(".iframe").on("click", function (e) {
            e.preventDefault(); 
            $iframe.attr({
                "src": this.href // add the content to iframe before showing
            }).parent($targetDiv).slideDown(500, function () { $('html,body').animate({scrollTop:$("#portfolio").offset().top}, 500); //show div
                $close.fadeIn(200).on("click", function () { 
                    $(this).fadeOut(100, function () { // fade out close button
                        $targetDiv.slideUp(500, function () { // hid div by sliding it up
                            //$iframe.removeAttr("src"); // remove after closing the box
                        }); // slideUp
                    }); // close fadeOut                
                }); // on click myClose
            }); // slideDown
        }); // on click link
    }); // ready
4

0 回答 0