我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
如果你的html是用css样式的,你可能可以链接不同大小的不同样式表。
其他回答
#wrap #frame解决方案很好,只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站,并把它变成pinterest一样的形式(与woodmark jQuery插件):
http://www.genautica.com/sandbox/woodmark-index.html
我认为你可以通过javascript(通过document.body.clientWidth等)计算你想要的高度和宽度,然后像这样将iframe注入你的HTML:
var element = document.getElementById("myid"); element.innerHTML += "<iframe src='http://www.google.com' height='200' width='" + document.body.clientWidth * 0.8 + "'/>";
我没有在IE6中测试这个功能,但它似乎与好版本一起工作:)
您不需要用额外的标记来包装iframe。只要确保你增加iframe的宽度和高度,就像你缩小iframe一样。
例如,将iframe内容缩放到80%:
#frame { /* Example size! */
height: 400px; /* original height */
width: 100%; /* original width */
}
#frame {
height: 500px; /* new height (400 * (1/0.8) ) */
width: 125%; /* new width (100 * (1/0.8) )*/
transform: scale(0.8);
transform-origin: 0 0;
}
基本上,为了获得相同大小的iframe,你需要缩放尺寸。
用CSS:
html{
zoom:0.4;
}
?-)
这些解决方案不适合我(模糊)与Flexbox和iFrame在100%,但如果iFrame使用rem em或百分比单位,那么有一个解决方案看起来很棒:
window.onload = function(){
let ifElem = document.getElementById("iframe-id");
ifElem.contentWindow.document.documentElement.style.fontSize="80%";
}