Question

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

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

P.S：在这个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

调整iframe大小以适应内容，然后使用jquery

0 个答案: