Question

问题

用户可以选择通过粘贴iframe代码或网址来创建iframe。当窗口重新调整大小时，iframe需要保持在页面的中间和底部。我已经让iframe大部分都停留在页面的中间和底部。但是当窗口重新调整大小（用户放大（150％等）或放大（50％等））时，iframe本身在用户放大时变大，在用户缩小时变小。由于我无法定位iframe中的内容，因此我一直在尝试找出一种将缩放应用于iframe的方法，以使其看起来保持相同的大小和相同的位置。当窗口重新调整大小时，我无法动态计算出iframe的比例。

Javascript

加载活动

                jQuery('#iframe_wrapper iframe').attr('id','iframe');
                jQuery( "#iframe" ).load(function() {
                    jQuery('#adhesion_iframe').css('-webkit-transform', 'scale(1)');
                });

位置

ratio = $('#iframe').width() / ($('#iframe').height() + ($('#close_btn')close.length>0 ? 0 : 20));


 if (window.innerWidth > window.innerHeight) {
                        var width = window.innerWidth / 1.5 / 1.5;
                        $('#iframe_wrapper').css({
                            width: width + "px",
                            height: window.innerWidth / ratio / 1.5 + "px",
                            left: parseInt((window.pageXOffset + window.innerWidth / 2) - (width / 2)) + "px",
                            top: parseInt(window.innerHeight + window.pageYOffset - window.innerWidth / ratio / 1.5 / 1.5) + "px"
                        });

iframe

if($('#iframe').length >0 ){

                    jQuery.fn.center = function(){
                        this.css("position","absolute");
                        this.css("top","60%");
                        this.css("left","50%");
                        this.css("margin-top","-"+(this.height()/2)+"px");
                        this.css("margin-left","-"+(this.width()/2)+"px");
                        return this;}

                    $('#iframe').center();

                $('iframe').css({
                    '-webkit-transform': 'scale('+(document.body.offsetWidth * scale / initial_width )
                });

                }

当页面加载时，初始比例将被设置为1.我正在考虑做这样的事情来动态地改变窗口上的比例尺寸' - webkit-transform'：'scale（'+（ document.body.offsetWidth * scale / initial_width）。因此，如果缩放级别达到150％，则缩放比例为0.something，如果缩放级别达到50％，则缩放可能为2。什么东西等......当然我可以硬编码比例，但这只适用于某些iframe大小（iframe的宽度和高度是由用户动态设置的。）所以它可能适用于300乘50但是iframe不是600乘100等。

Answer 1

我认为你过度了。只需使用css：

将iframe的大小设置为像素值

iframe {
   width: 400px;
   height: 300px; 
}

如何在浏览器缩放上动态定位和缩放iframe

1 个答案: