colorbox学习笔记--iframe内嵌页面调用父页面colorbox

常常用到iframe内嵌另一个页面，而这个页面里显示图片，当点击这个内嵌页面中的图片，让他在父级页面显示colorbox的效果

1.首先iframe内页面额代码

js：
 function colorBox() {
            var url = document.getElementById("bigPic").src;
            window.parent.showBigPic(url);
        }
html：
<img id="bigPic" src="<%=BigPic %>" ondblclick="colorBox()" alt="" style="width:300px;height:200px;" />

2.外面大页面

引用： 
<script type="text/javascript" src="/public/js/jquery-1.4.4.min.js"></script>
    <link href="http://www.cnblogs.com/public/ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/public/ColorBox/jquery.colorbox-min.js" type="text/javascript"></script>

js:
//显示图片
        function showBigPic(url) {
            $.colorbox({ html: "<div><img src='" + url + "'></div>" });
            $('div#cboxLoadedContent').css({ "border-bottom": "none", "background": "transparent" });
        }

3.大功告成！