iframe下内容自适应缩放

在页面使用iframe加载来自其他域名的内容,由于包含iframe的父级框长宽固定,如何使iframe里的内容自适应缩放并且居中显示,而不是只显示一部分(左上角),求如何做到? Ps:iframe里的内容是动态改变src来加载的,里面的内容可能是img, swf或是文字,但长宽可知。

阅读 23k
3 个回答

这个iframe缩放的问题暂时解决了: 由于知道父级框和iframe的大小(宽高),可以直接设置iframe的width和height为其实际的大小,再根据父级框的大小计算iframe的缩放比例,之后使用CSS3的transform的scale()缩放整个iframe,使其显示在父级框内,由于IE8以下不支持transform属性,可以使用filter替代。这里需要注意在使用transform属性时需要配合使用transform-origin来设置缩放的基准点。 以上就是我自己关于iframe内容自适应缩放的解决办法。

如果是来自其他域名的话基本上没有解决方案, iframe会有跨域限制,只要iframe内的域名跟父页面的域名不同,外面就不能对iframe内的页面做任何操作(包括读取)

新手上路,请多包涵

<iframe id="iframe" src="xxx" width="100%" height="850px" frameborder="no" border="0" style="border: none;display: block;margin: 0 auto;"></iframe>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题