iframe解决组件冲突时的大小设置

　　有时候当我们页面内包含了很多的组件，而组件又不是同一个人开发，很可能会出现各种各样的冲突，这时候我一般将自己的组件放到一个独立的页面中，然后通过iframe引到页面（为什么采取这种“低级”的做法，而不解决代码冲突呢？有这个疑问的同学，当你遇到别人做的一个很混乱的页面，其中只是用到了你的组件而已，冲突后他一遍一遍的找你，因为页面混乱，其中还包含别人写的一些组件，不好沟通这样的情景的时候，我想你就想通了，用iframe是多么的方便，尽管有效率啊各种问题，但是这无疑是最直接，最简单的办法，也可能是唯一的办法----不是所有人都会很热心的帮助修改别人的混乱页面）。

　　说正题，很多时候，页面内我们的组件大小是固定的，这样，我们就需要让iframe的大小和要求的组件大小一样大，这时候最简单的办法我们设置iframe的宽和高都为100%，并且设置iframe的scrolling为auto，然后设置iframe所引用页面body的最小宽度和最小高度，这样问题就轻松搞定。

　　当然，还有其他办法，比如说我们设置iframe的高和宽为固定值，然后再设置组件页面的外层容器的宽和高，并设置外层容器overflow是scroll就行了。

　　按照这样的思路，我们只需要在组件页面内获取到为iframe设置的高和宽，然后再设置组件的wrapper容器的宽和高等于iframe的宽和高，并且设置overflow为scroll，我们就可以给别人提供iframe版的组件了，当然以后我们的用户也不会再来烦我们了。

　　当然上面这是一种思路，我们完全可以讲“scroll”改进，比如像微博热议组件等地自定义滚动，获得更好的用户交互效果。

　　这种其实是我们通常所做的iframe高度自适应的反向思维，通过给定的iframe的高度，决定iframe内组件的展现形式。

转载于:https://www.cnblogs.com/purse/archive/2012/02/01/2334357.html