如何在浏览器缩放上动态定位和缩放iframe
问题
用户可以选择通过粘贴iframe代码或url来创建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乘50的iframe上工作，但不能在600乘100等的iframe上工作。
我认为你正在做得太过分了。 只需使用css将iframe的大小设置为像素值即可：
iframe {
width: 400px;
height: 300px;
}
上一篇: How to dynamically position and scale iframe on browser zoom