HTML框架应用的技巧

原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本人声明。否则将追究法律责任。
作者： 永恒の_☆ 地址： http://blog.csdn.net/chenghui0317/article/details/7933429

    在html运用中，使用iframe和freamset框架技术已经越来越广泛，这使得我们越来越重视这项技术。同时框架中也反应出了许多问题，比如：

（1）浏览器不兼容，ie测试完美，但是在firefox 上会出现2-3 个像素的空隙，然后chrome ，opera又不一样；

（2）框架之间 分割成不同的页面，不易操作，页面表现单调，无法js动态调用；

（3）框架所嵌套的页面不利于维护，，等等。

如何解决浏览器兼容？

在页面中，我们可以通过css来控制 页面的显示，但是框架所暴露的浏览器不兼容就不见得是使用css调整的好的，那么这时候要借助javascript来帮我们解决这一难题：

//声明数组
var Sys = {};
var ua = navigator.userAgent.toLowerCase();   //获取当前浏览器的信息，toLowerCase  转换成小写
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//这里使用了层层递进的三元运算
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);

///另外如果使用了jquery，可是直接这样子：
alert($.browser.msie);
alert($.browser.safari)

alert($.browser.opera);

alert($.browser.mozilla);
根据返回值来判断....来调整显示的页面的显示。

如何让框架技术灵活起来？

当我们使用了框架，这时候已经不是一个页面了，而是多个页面组合起来显示的，这样子除了加载完成之后，好像都不能互相操作。。。表面上是这样子，但是我们可以互相调用父页面或子页面的dom对象。

//使用浏览器显示的高度 减去logo高度，这样子可以保证页面中不会有滚动条。
$(".main").css("height",document.documentElement.clientHeight-logoHeight);

//父页面调用子页面的javascript方法
parent.frames["leftFrame"].window.changeLinkColor(obj.id);

//父页面取子页面 javasciript的全局变量
window.frames["rightFrame"].rightFrame=rightFrameWidth;

//父页面获取子页面的document节点
var obj = parent.frames["frameName"].window;
obj.document.getElementById('clientID')

//子页面取父页面的javascript的全局变量
var leftFrame=window.parent.leftFrameWidth;

//子页面获得父页面的宽度，子页面取其他子页面的宽度同样有效
var mainWidth = parseInt(parent.document.getElementById("main").style.width);
或者
var mainFrame_width = parseInt($("#mainFrame",parent.document).css("width"));

//子页面调用父页面的javascript方法
window.parent.mainForward('main.jsp',null);
 

纸上读来终觉浅，绝知此事要躬行！！！