如何通过拖动来调整iframe聊天的大小？

Question

我有一些代码来创建iframe并在这里连接jquery脚本：

(function($){ 
    var client_id = '1',
        p= 'right',
        vp = 'bottom';
        h = '550',
        dw = '400';
    var d=document;
    var w=window;

    function l(){

        var s = document.createElement('div');
        s.id = 'chatrix_init_widget'; 
        s.style = 'position: fixed; z-index:101010; '+p+': 0; '+vp+': 0; height:'+h+'px; width: '+dw+'px';
        var ss = document.getElementsByTagName('body')[0].appendChild(s);

        var i = document.createElement('iframe');
        i.className = 'chatrix_iframe_container';
        i.height = '100%';
        i.width = '100%';
        i.src = '//danialart.biz/chatrix/widget.php?c='+client_id;
        var ss = document.getElementById('chatrix_init_widget').appendChild(i);

    }
    function s() {
        var s = document.createElement('script');
        s.type = 'text/javascript'; 
        s.src = '//danialart.biz/chatrix/js/client_side.js';
        var ss = document.getElementById('chatrix_init_widget').parentNode.insertBefore(s, document.getElementById('chatrix_init_widget').nextSibling);
    }

    if(d.readyState=='complete'){
        l();
        s();
    }else{
        if(w.attachEvent){
            w.attachEvent('onload',function(){
            l();
            s();
        });
    }else{
        w.addEventListener('load',function(){l();s();},false);
    }}})(jQuery);

当页面准备就绪时，我想通过单击此div的顶部（jivosite.com上的示例）将jquery resizable连接到id为chatrix_init_widget的div。但它不起作用因为当我点击这个div中的某处 - iframe抓住我的点击并认为我点击了外部网站。我如何解决这个问题并在示例中调整我的聊天iframe框的大小？