前端开发切入第三方页面显示不全问题解决方案

前端开发切入第三方页面显示不全问题解决方案

最近做一个电视大屏，大屏分为三个部分，又分为上下结构，下部分分为左右结构布局，第一个部分是设备架构图、第二个部分是本市设备网点告警图，第一、二部分是我自己开发的，采用自动计算、自动适配各种场景缩放，兼容性没有任何问题；第三部分是切入第三方的页面，第三方只提供一个访问地址；其他什么都不管，

遇到的问题是第三个模块切入第三方的页面；显示不全；没法适配，在现有的容器中是没法装下第三方页面的内容，大部分溢出了，而且第三方页面写了最小高度和最小宽带控制，如下图所示

因为是第三方的页面，没法修改他们的东西，也没法要求他们修改东西，而且他们不乐意配合我这边工作，

最后我是这样解决的；采用CSS transform 属性；transform 属性向元素应用 2D 或 3D 转换。允许我们对元素进行旋转、缩放、移动或倾斜。结合transform-origin属性；

代码如下

<style type="text/css">
	.pgIframe{
		width: 1920px;
		height: 1080px;
		transform-origin: top left;
		transform:scale(0.47,0.33);
	}
</style>

<iframe  width="100%" height="100%" class="pgIframe" src="http:137.89.47.253/yun/yunIndex.html"></iframe>

问题基本解决了80%了；这时候又冒出一个问题；有个白色的边框

带有白色边框，影响了整体的显示效果；再次修改iframe，添加了frameborder=“no” scrolling="no"属性；

<iframe marginwidth="0" marginheight="0" width="100%" height="100%" class="pgIframe" src="http:137.89.47.253/yun/yunIndex.html" frameborder="no" scrolling="no"></iframe>

问题得以完美解决，效果图如下

最终效果图下图所示

完美解决了大屏显示问题；其实就是利用率他的缩放原理，把第三方的页面按照16:9的场景进行缩小；以达到适配这边固定容器内显示的效果；

如果你有更好的解决方案，欢迎留言讨论交流，共同学习，