网站开发JS学习总结

近期使用Yii开发了一个网站,前台使用了大量的Js交互效果，由于之前一直研究php,对javascript使用不多，导致项目进行中，进度缓慢，JS调试频频出错，不过，最后还是通过几天的努力，将问题解决了，现在对这段时间工作小结一下，以便后续项目开发时，可以借鉴，快速完成任务。

项目使用了colorbox插件，在使用该插件过程中，出现了一个iframe高度自适应的问题，这个问题花了本人接近半天的时间才搞定。所以有必要记录下来。

a. 去网站(http://www.jacklmoore.com/colorbox/)下载colorbox包，参考里面的示例，可以发现colorbox功能比较全面，刚好我的项目中需要iframe模式的弹出框，就选择用iframe.且不带滚动条，因此可以设置

$(".iframe").colorbox({

            iframe:true,           

            scrolling:false,

            innerWidth:'898px',

            innerHeight:'445px',

            overlayClose:false,               

        });

如果希望iframe页面的高度自适应，便在子页面添加代码如下:

<script type="text/javascript">

jQuery(document).ready(function (){  

 jQuery(window).bind("load", function () {  

 var frameWidth = jQuery(document).width();  

 var frameHeight = jQuery(document).height();   

 parent.$.fn.colorbox.resize(frameWidth, frameHeight);  

 });  

}); 

</script>

设置这两步，就可以达到自己想要的效果了。