[浪峰JQuery开发]jquery最有意思的IFrame类似应用--值得深入研究

 

前几天一时兴起答应朋友的需求--做一个外国的企业网站；

本想做就做呗，可没想我辛辛苦苦用浪风认真php平台开发后，对方来一句我服务器不能安装其他程序，请给我用frame框架开发。

浪风那是一个苦字难言，随后我试下了单纯ifame的页面载入，有一个致命的特点：不能随着内容的高度自动调节，牛人都些js作判断来实现高度调节。

浪风心想啊，这不是我的作风，一定该有更简洁的方法，并且也是咱小园子喜欢的。

琢磨了一下发现：咦，这玩意不是跟tabdiv切换有异曲同工之妙吗？

随后回想起浪风曾在某大型电子商务公司时做的jquery插件：div沙盒内容远程载入，本地随意切换。

那个插件要做很多判断，相比之下，这个ifame功能就简单多了：点击按钮后自动从服务器拉取页面，然后放到对应的div内，我们强大的web浏览器就会完美的渲染内容。

 

说时迟，那时快，立刻找到需要用的jquery.js载入页面

<script src="jquery.min.js" type="text/javascript"></script>

 

然后运用浪风以前成熟的jquery开发经验迅速写出

<script type="text/javascript" >
$(function(){
    $(".cmenu a").live('click', function(){
        $("#righter").load($(this).attr('href'));
        return false;
    })
});
</script>

 

之后迅速在相应的a标签的任一上级加入class=cmenu的属性。运行浏览器调试，嘿嘿，成功了，真不错。第一次感觉还有这样实现，真的是太神奇啦。

此代码看似简单（自写就4行代码，加jquery格式共6行代码），功能却一点都不含糊。

首先浪风带大家做一下分享：

1、限制功能区在class=cmenu的父节点下，防止其他地方的a标签受感染而影响正常的功能；这叫君子不夺人所好，虽然咱php开发的都是猿类，但咱也要有点风度。

2、live函数实时绑定咱们要操作的a标签上面，防止新载入的页面不能重复使用咱设计的代码功能；某个大侠过去，不能重复使用的代码不是好代码。

3、真正的好戏在这里，用load函数载入a标签链接的服务器内容，并填充到页面重新渲染；公猿说我看上你了，母猿说我们结核吧，就是这么完美的展现。

4、最后也是通常也JavaScript关键的一部，“return false;”，让正常的a链接功能失效；此操作可以防止多种a链接加js代码带来的问题：比如直接跳转了，本页调到页眉了。

 

源地址：http://laf.freel.cn/js/jquery-the-most-interesting-iframe-application.html