我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。
其他回答
我认为你可以通过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中测试这个功能,但它似乎与好版本一起工作:)
我找到了一个可以在IE和Firefox中运行的解决方案(至少在当前版本上是这样)。在Safari/Chrome上,iframe被调整到原始大小的75%,但iframe内的内容根本没有缩放。在Opera中,这似乎不起作用。这感觉有点深奥,所以如果有更好的方法,我欢迎建议。
<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>
...
<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>
注意:我必须在Firefox中使用wrap元素。出于某种原因,在Firefox中,当您将对象缩小75%时,由于布局原因,它仍然使用图像的原始大小。(试着从上面的示例代码中删除div,你就会明白我的意思了。)
我从这个问题中发现了一些。
这些解决方案不适合我(模糊)与Flexbox和iFrame在100%,但如果iFrame使用rem em或百分比单位,那么有一个解决方案看起来很棒:
window.onload = function(){
let ifElem = document.getElementById("iframe-id");
ifElem.contentWindow.document.documentElement.style.fontSize="80%";
}
如果你的html是用css样式的,你可能可以链接不同大小的不同样式表。
我想分享一下我的想法,使用上面给出的大部分内容。我还没有检查Chrome浏览器,但据我所知,它在IE、Firefox和Safari浏览器中都可以运行。
这个例子中的具体偏移量和缩放因子适用于Facebook标签的iframe中缩小和居中两个网站(宽度为810px)。
使用的两个网站是一个wordpress网站和一个ning网络。我不是很擅长html,所以这可能已经做得更好,但结果似乎不错。
<style>
#wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
#frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
#frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
<iframe id="frame" src="http://www.example.com"></iframe>
</div>