首页 > 代码库 > 通过刷新来实现自适应

通过刷新来实现自适应

前言:领导要求我实现自适应,前期前端框架的搭建也没我,一开始项目也没考虑这个,就因为老总说了一句,领导就要求实现,唉。。。

      自适应可以通过刷新来实现:绑定window.onresize函数,函数中计算所要刷新的某个模块需要的高度和宽度,然后刷新iframe。

iframe的几种刷新方法(网上找的):

       方案一:用iframe的name属性定位
<input type="button" name="Button" value="http://www.mamicode.com/Button" onclick="document.frames(‘ifrmname‘).location.reload()">

<input type="button" name="Button" value="http://www.mamicode.com/Button" onclick="document.all.ifrmname.document.location.reload()">

方案二:用iframe的id属性定位
<input type="button" name="Button" value="http://www.mamicode.com/Button" onclick="ifrmid.window.location.reload()">

方案三:当iframe的src为其它网站地址(跨域操作时)
<input type="button" name="Button" value="http://www.mamicode.com/Button" onclick="window.open(document.all.ifrmname.src,‘ifrmname‘,‘‘)">

方案四:通过和替换iframe的src来实现局部刷新
可以用document.getElementById("iframname").src=""来进行iframe得重定向;

其中前三个,我都不管用,第四个起作用了。

iframe实现自适应的优点:整体刷新自适应,不会有一些奇怪的问题。

                          缺点:和设置CSS相比速度慢。

总结:刷新自适应法适用于含表格、图表的iframe,因为这些自适应时,一般都得重新绘制表格图标,刷新会顺带完成这些工作。

通过刷新来实现自适应