我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。
其他回答
如果你的html是用css样式的,你可能可以链接不同大小的不同样式表。
这是我在一个宽度为890px的页面上的解决方案
#frame {
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0;
}
用CSS:
html{
zoom:0.4;
}
?-)
所以可能不是最好的解决方案,但似乎还可以。
<IFRAME ID=myframe SRC=.... ></IFRAME>
<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>
显然不是试图修复父元素,只是添加了“缩放:50%”样式到子元素的主体,并使用了一点javascript。
也许可以设置“HTML”元素的样式,但没有尝试。
这些解决方案不适合我(模糊)与Flexbox和iFrame在100%,但如果iFrame使用rem em或百分比单位,那么有一个解决方案看起来很棒:
window.onload = function(){
let ifElem = document.getElementById("iframe-id");
ifElem.contentWindow.document.documentElement.style.fontSize="80%";
}