问题

用户可以选择通过粘贴自己的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.something等.....当然，我可以硬编码比例尺，但仅适用于某些iframe尺寸（iframe的宽度和高度由用户动态设置），因此它可能适用于300 x 50的iframe，而不适用于600 x 100的iframe等。

解决方案

我想你太过分了。只需使用CSS将iframe的大小设置为像素值即可：

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