首页 > 代码库 > 通过刷新来实现自适应
通过刷新来实现自适应
前言:领导要求我实现自适应,前期前端框架的搭建也没我,一开始项目也没考虑这个,就因为老总说了一句,领导就要求实现,唉。。。
自适应可以通过刷新来实现:绑定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,因为这些自适应时,一般都得重新绘制表格图标,刷新会顺带完成这些工作。
通过刷新来实现自适应