webbrowser.InvokeScript如何执行jQuery函数？

Question

<body>
<script type="text/javascript" src="js/hashbang.js"></script>
<script type="text/javascript" src="js/v3.js?beta0.5"></script>
<script type="text/javascript">
    // Data pipe
    var datapipe = {
        torrents : {},
        templates:{
            details:function(_){
                var _ = datapipe.torrents["t"+_];
                //console.log("So far so good. Templating.");
                $('#T_comment .btn span').text(_.comment).parent().parent().attr('count',_.comment);
                $('#T_files .btn span').text(_.files);
                return "<a href='download.php/"+_.id+"/"+_.fname+"'><div align=center><img src=/pic/dl.png border=0></div></a><br/>Size: <b>"+_.size+"</b> &nbsp; | &nbsp; Registered: <b>"+_.added+" ago</b> &nbsp; | &nbsp; Seeders: <font color=blue><b>"+_.seed+"</b></font> &nbsp; | &nbsp; Leechers: <font color='red'><b>"+_.leech+"</b></font>"+(_.own ? " &nbsp; | &nbsp; <a href='/edit.php?id="+_.id+"'><font color=red><b>[Edit Torrent]</b></font></a>":"")+(_.tool ? " &nbsp; | &nbsp; <a id='free' alt='"+(_.free?2:1)+"'>["+(_.free?"Remove FL!":"Freeleech it!")+"]</a>":"")+"<br><hr><b><font size='3'><font color='blue' id='tname'>"+_.name+"</font>"+(_.free?" <span class='tag"+_.id+" tags free'>Freeleech</span>":"")+"</font></b><hr><div id='desc'>"+_.des+"</div><br/>";
            },
            comment:function(_){
                return "<li class='clearfix comment "+(typeof _.clas !='undefined'?_.clas:'')+"' id='li-comment-"+_.id+"'><div id='comment-"+_.id+"'><img width='100' src='"+_.avatar+"' class='avatar lazy' lazy='yes' /><div class='comment-author'><a href='/userdetails.php?id="+_.uid+"'>"+_.name+"</a>"+(_.donor?"<a href='/donate.php'><img alt='Donor' src='pic/star.gif'></a>":"")+(_.warned?"<img alt='Warned' src='/pic/warned.gif'>":"")+"<div class='tools'>"+(_.uid== 1124468?"<div class='edit' id='"+_.id+"'></div>":"")+"</div></div><div><span class='comment-date'>"+_.added+"</span></div><div class='comment-body'><p>"+_.text+"</p></div></div></li>";
            }
        }
    }
    //-----------------------------------------------------------------------------------------------------------------
    // Details
    detail = {
        show : function(){
            //console.log("TADA!");
            view = true;
            $('#details').show().prev().animate({width:'0px'},(nA?500:1),function(){
                $('#T_back').removeAttr('lock').show().animate({width:'98px'},{duration: (nA?1500:1), easing:'Elastic'});
                $('#T_comment').show().animate({width:'108px'},{duration: (nA?1500:1), easing:'Elastic'});
                if(datapipe.torrents["t"+lock].files)
                    $('#T_files').animate({width:'0px'},(nA?150:1)).show().animate({width:'108px'},{duration: (nA?1500:1), easing:'Elastic'});
                $(this).hide().parent().parent().removeClass('warp');
                $('#T_comment').attr('lock','locked');
                Engine.API('jxt=8&jxw=cms&id='+lock+'&c='+$('#T_comment').attr('count'));
                slo = 0;
                $(window).bind('scroll',function(){
                    if ($("#morecommentbtn").offset() && slo < 4)
                        if ($(window).scrollTop() > ($("#morecommentbtn").offset().top-$(window).height())){
                            $('#morecommentbtn a').click();
                            //console.log(slo);
                            if(slo > 3)
                                $(window).unbind('scroll');
                            else
                                slo++;
                        }
                }); 
            });
        },
        back : function(){
            $(window).unbind('scroll');
            //console.log("Back function called!");
            $('#mainBox').addClass('warp');
            $('#T_back').animate({width:'398px',opacity:'0'},(nA?500:1),function(){$(this).css({width:'0px',opacity:'1',display:'none'});});
            $('#T_comment').removeAttr('alt').removeAttr('count').removeAttr('lock').animate({width:'408px',opacity:'0'},(nA?500:1),function(){$(this).css({width:'0px',opacity:'1',display:'none'});});
            if(datapipe.torrents["t"+lock].files)
                $('#T_files').animate({width:'108px'},(nA?150:1)).removeAttr('lock').animate({width:'408px',opacity:'0'},(nA?500:1),function(){$(this).css({width:'0px',opacity:'1',display:'none'});});
            $('#T_table').show().animate({width:'760px'},(nA?500:1),function(){
                $('#details').hide().empty();
                //console.log("scrolled back to :"+ypos+'px');
                $('html,body').animate({scrollTop:(hashed==2?lpos:ypos)+'px'},(nA?'slow':1),function(){
                    //console.log("highlighted: #tr"+lock);
                    $('#tr'+lock).highlight(0.8);
                    lock = view = 0;
                    if(ypos)
                        lpos = ypos;
                    ypos = 0;
                    hashed = 1;
                    //console.log("lock cleaned");
                });
            });
            //console.log("Done.");
        },
        preview : function(_){
            if(typeof datapipe.torrents["t"+_] == 'undefined')
                window.location.replace('/details.php?id='+_);
            if(datapipe.torrents["t"+_].des != 0){
                //console.log("Found! Making the template!");
                var tempdesc = datapipe.templates.details(_);
                $('#details').empty().html(tempdesc);
                //console.log("Done. Show function excuted.");
                if(hashed == 1)
                    Engine.hash.write('/details.php?id='+_);
                else
                    detail.show();
            }else{
                //console.log("Description not found. Requesting...");
                Engine.API('jxt=8&jxw=d&id='+_,1);
            }
            if(!ypos){
                ypos = $(window).scrollTop();
                //console.log("scrolled up from: "+ypos);{duration: 1000, easing: method2}
                $('html,body').animate({scrollTop:$("#mainBox").offset().top}, (nA?'slow':1),function(){});
            }
        }

    }
    jQuery.easing['Elastic']=function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    }
    jQuery.fn.highlight = function(level) {
        highlightIn = function(options){

            var el = options.el, visible = options.visible !== undefined ? options.visible : true;

            setTimeout(function(){
                if (visible) {
                    el.css('background-color', 'rgba('+[77, 110, 255]+','+options.iteration/10+')');
                    if (options.iteration/10 < 1) {
                        options.iteration += 2;
                        highlightIn(options);
                    }
                } else {
                    el.css('background-color', 'rgba('+[77, 110, 255]+','+options.iteration/10+')');
                    if (options.iteration/10 > 0) {
                        options.iteration -= 2;
                        highlightIn(options);
                    } else {
                        el.css('background-color', '#fff');
                    }
                }
            }, 110);
        };

        highlightOut = function(options) {
            options.visible = false;
            highlightIn(options);
        };

        level = typeof level !== 'undefined' ? level : 'warning';
        highlightIn({'iteration': 1, 'el': $(this), 'color': level});
        highlightOut({'iteration': 10, 'el': $(this), 'color': level});
    };
    //-----------------------------------------------------------------------------------------------------------------
    // Hash control
    Engine.hash = {
        fns : {
            details:function(_){
                if(hashed){
                    if(lock)
                        detail.show();
                    else{
                        var id = ss(_,16,_.length);
                        lock = id;
                        hashed = 2;
                        //console.log("cache push: "+id+" total: "+_.length);
                        detail.preview(id);
                    }
                }else
                    window.location.replace(_);
/*              var id = ss(_,16,_.length);
                console.log("Preview pushed ID: "+id+" total: "+_.length);
                detail.preview(id);*/
            },
            browse:function(_){
                hashed = 1;
                Engine.API(_+"&jxt=8&jxw=b",1);
            }

        },
        api : [
                {code:"/details.php",fn:"details"},
                {code:"/browse.php",fn:"browse"}
              ],
        write:function(_){
            window.location = '#'+_;
        }
    };

    //-----------------------------------------------------------------------------------------------------------------
    $.extend(Engine.api,{
                Push:function(_){
                    datapipe.torrents["t"+_.id].des = _.des;
                    datapipe.torrents["t"+_.id].added = _.reg;
                    datapipe.torrents["t"+_.id].own = _.own;
                    datapipe.torrents["t"+_.id].tool = _.tool;
                    detail.preview(_.id);
                },
                Oarrive:function(){
                    var dataStracture = "<h2>Search results</h2><h2>Nothing found!</h2><p>Try again with a refined search string.</p>";
                    $('#torrenttable').html(dataStracture);
                    dataStracture = "";
                },
                arrive:function(_){
                    //console.log("arrive called");
                    var hd = _.head;
                    var type = [1,2,2,2,2];
                    //console.log("Bingo on head.");
                    type[hd.id] = hd.type;
                    //console.log("head set.");
                    datapipe.torrents = {};
                    //console.log("Datapipe reseted.");
                    var dataStracture = "<table id='ttable' class='movehere' border='0' cellspacing='0' cellpadding='5'><tr class='thead'><td>Type</td><td class='tname' onClick=\"change('"+hd.old+"s=1&t="+type[0]+"');\">Name</td><td><img src='http://static.exampleSite.me/td/tor-header.png' title='Download as .torrent file' /></td><td><img src='http://static.exampleSite.me/td/txt-header.png' title='Download as .txt file' /></td><td onClick=\"change('"+hd.old+"s=2&t="+type[1]+"');\">Com.</td><td onClick=\"change('"+hd.old+"s=3&t="+type[2]+"');\">Size</td><td onClick=\"change('"+hd.old+"s=4&t="+type[3]+"');\">Seeders</td><td onClick=\"change('"+hd.old+"s=5&t="+type[4]+"');\">Leechers</td></tr>";

                    //console.log("Bingo on start.");
                    var c = false;
                    $.each(_.torrents,function(){
                            datapipe.torrents["t"+this.id] = this;
                            //console.log("datapipe pushed: "+datapipe.torrents["t"+this.id].name);
                            c = c ? false : true;
                            dataStracture += "<tr id='tr"+this.id+"' class='trows"+(c?" tcolor":"")+"'><td><a class='_cat' id='"+this.cat+"' href='/browse.php?#/browse.php?&cata=yes&cat="+this.cat+"'><img src='"+this.cat_pic+"' border=0 /></a></td><td class='tname'><a class='T_detail' id='"+this.id+"' href='details.php?id="+this.id+"'>"+(this.New?"<b>":"")+this.name+"</b></a>"+(this.free?" <span class='tag"+this.id+" tags free'>Freeleech</span>":"")+(this.New?" <span class='tags newtags'>NEW!</span>":"")+"<br />Uploaded: "+this.added+"</td><td><a href='download.php/"+this.id+"/"+this.fname+"'><img src='http://static.exampleSite.me/td/tor-header.png' title='Download as .torrent file' border='0' /></a></td><td><a href='downloadtxt.php/"+this.id+"/"+this.tname+"'><img src='http://static.exampleSite.me/td/txt-header.png' title='Download as .txt file' border='0' /></a></td><td>"+(this.comment?"<a href='details.php?id="+this.id+"&tocomm=1'><b id='cr"+this.id+"'>"+this.comment+"</b></a>":"<zek id='cr"+this.id+"'>0</zek>")+"</td><td>"+this.size.replace(' ','<br />')+"</td><td>"+(this.seed?"<b>"+this.seed+"</b>":"0")+"</td><td>"+(this.leech?"<b>"+this.leech+"</b>":"0")+"</td></tr>";
                    });
                    $('#torrenttable').html(_.pager+dataStracture+"</table>"+_.pager);
                    dataStracture = "";
                },
                comments:function(_){
                    var dataStracture = '';

                    $.each(_.comments,function(){
                        dataStracture += datapipe.templates.comment(this);
                    });

                    $('#comment-table ul').append(dataStracture).parent().append(_.pager);
                    dataStracture = "";
                },
                commentbox:function(_){
                    $('#details').append(_+'<div id="comment-table"><ul class="clearfix"></ul></div>');
                },
                comment:function(_){
                    _['clas'] = 'hidden';
                    dataStracture = datapipe.templates.comment(_);
                    datapipe.torrents["t"+lock].comment++;
                    $('#T_comment .btn span').text(datapipe.torrents["t"+lock].comment);
                    $('#cr'+lock).html($('#cr'+lock).text()=='0'?"<a href='details.php?"+lock+"&tocomm=1'><b id='cr"+lock+"'>"+datapipe.torrents["t"+lock].comment+"</b></a>":datapipe.torrents["t"+lock].comment);
                    $('#comment-table ul').prepend(dataStracture).children().first().slideDown().removeClass('hidden');
                    $('#tcombox').val('');
                },
                del:function(_){
                    datapipe.torrents["t"+lock].comment--;
                    $('#T_comment .btn span').text(datapipe.torrents["t"+lock].comment);
                    $('#cr'+lock).text(datapipe.torrents["t"+lock].comment);
                    $('#li-comment-'+_).slideUp(function(){$(this).remove()});
                },
                edit:function(_){
                    $('#li-comment-'+_.id+' .comment-body').empty().html(_.box);
                    $('#li-comment-'+_.id+' .tools').prepend('<div id="'+_.id+'" class="save"></div>');
                },
                save:function(_){
                    $('#li-comment-'+_.id+' .comment-body').empty().html('<p>'+_.text+'</p>');
                    $('#li-comment-'+_.id+' .tools').prepend('<div id="'+_.id+'" class="edit"></div>');
                },
                free:function(_){
                    datapipe.torrents["t"+lock].free = _.a;
                    $('#free').replaceWith(_.link);
                    if(_.a == 1)
                        $('#tr'+lock+' .T_detail, #details #tname').after(" <span class='tag"+lock+" tags free'>Freeleech</span>");
                    else
                        $('.tag'+lock).remove();
                },
                tags:function(){
                    $(".newtagsbut").remove();
                    $('.newtags').fadeOut('slow');
                },
                files:function(_){
                    var dataStracture = "<div id='files'><table border='1' cellspacing='0' cellpadding='5'><tr><td width='690'>Path</td><td width='60' align='right'>Size</td></tr>";
                    $.each(_,function(){
                        dataStracture += "<tr><td>"+this.path+"</td><td align='right'>"+this.size+"</td></tr>";
                    });
                    $('#desc').after(dataStracture+"</table></div>");
                    $('html, body').animate({scrollTop:$("#files").offset().top},(nA?400:1));
                    dataStracture = "";
                }
    });
    var lock = view = lpos = ypos = hashed = 0;
    var nA = true;
    function change(datas,reloaded,move,change) {
        if(!inx(datas,"/details.php",0))
            Engine.hash.write('/browse.php?&'+datas);
        else{
            if(lock){
                //console.log("LOL YOU TROL!");
                return false;
            }else{
                var id = ss(datas,16,datas.length);
                lock = id;
                //console.log("Preview pushed ID: "+id+" total: "+datas.length);
                detail.preview(id);
            }
        }
        if(move == "yes")
            $('html,body').animate({scrollTop: $("#movehere").offset().top},(nA?600:1));        
    };
    $(window).hashchange(function(){
        var _ = location.hash;
        //console.log("lock: "+lock);
        if(lock && view){
            //console.log("lock detected");
            detail.back();
            return false;
        }
        //console.log("hash came: "+_);
        if(!_ && !lock && !view){hashed=1;Engine.API("jxt=8&jxw=b"); return;}

        //console.log("hash changed: "+_);
        _ = _.replace(_.substr(0,_.indexOf('#')+1),'');
        //console.log("hash removed: "+_);
        for(i=0;i!=Engine.hash.api.length;i++){
            //console.log("loop #: "+i+" in "+Engine.hash.api.length+" loops");//
            if(inx(_,Engine.hash.api[i].code,0)){
                //console.log("loop found: "+Engine.hash.api[i].code);//
                Engine.hash.fns[Engine.hash.api[i].fn](_);
                break;
            }else{
                //console.log("loop not match: "+Engine.hash.api[i].code);//
            }
        }
    });
    $(document).ready(function() {
        $('._cat').live('click',function(x) {x.preventDefault();change('cata=yes&cat='+this.id); $("input.cats").removeAttr('checked'); $(this).prev().attr('checked','checked'); return false;});
        $('a.T_detail').live('click',function(_) {if((_.ctrlKey||_.metaKey))return true;change('/details.php?id='+this.id); return false;});
        $('.del').live('click',function() {$(this).remove();Engine.API('jxt=8&jxw=cm&id='+this.id+'&a=2',1);});
        $('.edit').live('click',function() {$(this).remove();Engine.API('jxt=8&jxw=cm&id='+this.id+'&a=3',1);});
        $('.save').live('click',function() {$(this).remove();Engine.API('jxt=8&jxw=cm&id='+this.id+'&a=4&comment='+$('#ed'+this.id).val(),1);});
        $('#T_comment').click(function(){$('html, body').animate({scrollTop:$("#cmBox").offset().top},(nA?400:1));});
        $('#T_files').click(function(){if($(this).attr('lock')!='locked'){$(this).attr('lock','locked');Engine.API('jxt=8&jxw=fl&id='+lock,1);}else{$('#files').toggle();$('html, body').animate({scrollTop:$("#files").offset().top},(nA?400:1));}});
        $('#T_back').click(function(){if($(this).attr('lock')!='locked'){$(this).attr('lock','locked');history.back();}});
        $('#free').live('click',function(){if($(this).attr('lock')!='locked'){$(this).attr('lock','locked');Engine.API('jxt=8&jxw=fr&id='+lock+'&a='+$(this).attr('alt'),1);}});

        $(window).hashchange();
    });
</script>
<script type="text/javascript" src="js/cookie.js"></script>
<div id='T_back'><img src="/pic/back.png"></div>
<div id='T_comment'><div class='btn'><span></span></div></div>
<div id='T_files'><div class='btn'><span></span></div></div>
<br>
<div class='warp' id='mainBox'>
    <div class='warper'>
        <div id='T_table'>
            <style type="text/css">
.Browse {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none!important;
    text-shadow:1px 1px 0px #ffffff;
}
.Browse.active{
    color:#999!important;
}
.Browse:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.Browse:active {
    position:relative;
    top:1px;
}
</style>

<div id="torrenttable" style="width: 760px; display: block;"></div>

我正在使用 c# 中的 webBrowser 控件加载网页，需要调用一个 Jquery 函数，该函数 return 是一个字符串值。我得到了使用 InvokeScript 方法的解决方案，我尝试了很多，但一切都失败了我想要 Webbrowser.InvokeScript() 执行 arrive:function() 但值 return 始终为 null 我对 Jquery 一无所知，所以我会尝试请帮助我!!!

已更新！！！！！！！！！！！！！！！

private void RegisterJsFunction(string function)
{
    // Your WebBrowser control and document
    var htmlDocument = this.webBrowser1.Document;
    if (htmlDocument != null)
    {
        HtmlElement head = htmlDocument.GetElementsByTagName("head")[0];
        HtmlElement scriptEl = htmlDocument.CreateElement("script");
        if (scriptEl != null)
        {
            IHTMLScriptElement element = (IHTMLScriptElement) scriptEl.DomElement;
            element.text = function;
            head.AppendChild(scriptEl);
        }
    }
}

private string InvokeJsFunction(string functionName)
{
    string html = string.Empty;
    Action action = () =>
    {
        // Your control and document 
        var htmlDocument = this.webBrowser1.Document;
        if (htmlDocument != null)
        {
            html=htmlDocument.InvokeScript(functionName).ToString();
        }
    };

    if (this.InvokeRequired) this.Invoke(action);
    else action();
    return html;
}

   string html = string.Empty;
    webBrowser1.DocumentCompleted += (s, exx) =>
    {
        switch (webBrowser1.ReadyState)
        {
            case WebBrowserReadyState.Complete:
            {
                RegisterJsFunction("function foo(){Engine.api.arrive();}");
                html=InvokeJsFunction("foo"); //object reference not set to an instance of an object
                break;
            }
        }

    };

我按照您的代码 (@dyatchenko) 更新了我的代码，但我收到一个错误："object reference not set to an instance of an object" 在行 html=InvokeJsFunction("foo"); 拜托，你能帮我解决这个错误吗！！

已更新 2!!!!! 我更新了我的来源 html.you 可以再次检查它帮助我！！

Answer 1

首先，你必须在你的页面上注册你的javascript（如果你的页面已经有它 - 你不需要它），就像这样：

private void RegisterJsFunction(string function)
{
    // Your WebBrowser control and document
    var htmlDocument = this.webBrowser1.Document; 
    if (htmlDocument != null)
    {
        HtmlElement head = htmlDocument.GetElementsByTagName("head")[0];
        HtmlElement scriptEl = htmlDocument.CreateElement("script");
        if (scriptEl != null)
        {
            IHTMLScriptElement element = (IHTMLScriptElement)scriptEl.DomElement;
            element.text = function;
            head.AppendChild(scriptEl);
        }
    }
}

然后，您可以这样调用它：

private void InvokeJsFunction(string functionName)
{
    Action action = () =>
        {
            // Your control and document 
            var htmlDocument = this.webBrowser1.Document; 
            if (htmlDocument != null)
            {
                htmlDocument.InvokeScript(functionName);
            }
        };

    if (this.InvokeRequired) this.Invoke(action);
    else action();
}

这是一个向您展示如何使用这两个函数的示例：

RegisterJsFunction("function foo() { alert('hello world'); }");
InvokeJsFunction("foo");

这些代码削减来自我的项目。我用了很多。对于您的示例，您必须先更改 javascript 代码：

<script type="text/javascript">
    function MyArrive(_){
         // arrive:function(_) stuff here
    }

    $.extend(Engine.api,{
                Push:function(_){ ... },
                Oarrive:function(){ ... },
                arrive: function(_) { MyArrive(); },
                comments:function(_){ ... },
                commentbox:function(_){ ... },
                comment:function(_){ ... },
                del:function(_){ ... },
                edit:function(_){ ... },
                save:function(_){ ... },
                free:function(_){ ... },
                tags:function(){ ... },
                files:function(_){... }
         });
</script>

然后就可以用InvokeJsFunction("MyArrive");调用想要的函数了。希望这有帮助。

Answer 2

如果你想得到在arrive方法的dataStracture变量中声明的table你必须使用这个代码：

RegisterJsFunction("function foo(){ Engine.api.arrive(); return $('#ttable').html(); }"); 
var html = InvokeJsFunction("foo").ToString();

html 变量将是理想的 table 并且没有 NullReferenceException。

webbrowser.InvokeScript如何执行jQuery函数？

How to execute jQuery function by webbrowser.InvokeScript?

c#

jquery

webbrowser-control

winforms