我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。
其他回答
我想分享一下我的想法,使用上面给出的大部分内容。我还没有检查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>
#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中测试这个功能,但它似乎与好版本一起工作:)
这是我在一个宽度为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;
}
在花了几个小时试图让它在IE8、9和10中工作之后,下面是对我有效的方法。
这个精简的CSS工作在FF 26, Chrome 32, Opera 18,和IE9 -11 2014年1月7日:
.wrap
{
width: 320px;
height: 192px;
padding: 0;
overflow: hidden;
}
.frame
{
width: 1280px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
对于IE8,设置宽度/高度以匹配iframe,并在.wrap container div中添加-ms-zoom:
.wrap
{
width: 1280px; /* same size as frame */
height: 768px;
-ms-zoom: 0.25; /* for IE 8 ONLY */
}
只需使用您最喜欢的浏览器嗅探方法,有条件地包含适当的CSS,参见是否有一种方法在*.css文件中执行特定于浏览器的条件CSS ?为了一些想法。
IE7是一个失败的原因,因为-ms-zoom直到IE8才出现。
下面是我测试的实际HTML:
<div class="wrap">
<iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
<iframe class="frame" src="http://apple.com"></iframe>
</div>
http://jsfiddle.net/esassaman/PnWFY/