Cefsharp winforms：将jquery注入页面答案

【问题标题】：Cefsharp winforms: Inject jquery into pageCefsharp winforms：将jquery注入页面
【发布时间】：2016-05-03 08:20:29
【问题描述】：

我正在使用 ChromiumWebBrowser 加载网站，页面加载后，我将执行一些脚本

browser.ExecuteScriptAsync(script)

但是那个网站没有使用 jquery，所以很难编写我的脚本。我想将 jquery 注入该站点以更轻松地编写我的脚本。我该怎么做？非常感谢

编辑：

我的电脑中有一个 jquery 文件。我想将它添加到我要抓取数据的页面中。我尝试使用 LoadingStateChanged 事件，但没有成功。

private void Browser_LoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
{
    ChromiumWebBrowser browser = (ChromiumWebBrowser)sender;
    lbStatus.SetText(e.IsLoading ? "Loading..." : browser.Address);
    if (!e.IsLoading)
    {
        //Load jquery
    }
    else
    {

    }
}

【问题讨论】：

您可以检查页面是否可以访问 jQuery，如果没有从 CDN 中添加，if (!jQuery) { /* load from CDN */ }。后者的操作方法见here
如何从本地文件添加脚本？我正在尝试使用 ChromiumWebBrowser 来抓取数据

标签： c# jquery winforms chromium-embedded cefsharp

【解决方案1】：

将此代码设置为script变量作为字符串，然后调用browser.ExecuteScriptAsync(script)

(function () {
    // more or less stolen form jquery core and adapted by paul irish
    function getScript(url, success) {
        var script = document.createElement('script');
        script.src = url;
        var head = document.getElementsByTagName('head')[0],
            done = false;
        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState
                || this.readyState == 'loaded'
                || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null;
                head.removeChild(script);
            }
        };
        head.appendChild(script);
    }
    getScript('http://code.jquery.com/jquery-latest.min.js', function () {
        if (typeof jQuery == 'undefined') {
            console.log('Sorry, but jQuery wasn\'t able to load');
        } else {
            console.log('This page is now jQuerified with v' + $.fn.jquery);

            $(document).ready(function () {
                alert(1);
                //here you can write your jquery code
            });
        }
    });
})();

【讨论】：

@amirpaia 通过这段代码我们可以注入任何 JS 文件，对吧？
@Amogh 是的，你可以
@amirpaia 我可以注入其他任何 JS 文件，感谢您的 sn-p，但我也想注入 CSS，知道吗？
@Amogh 您可以将document.createElement('script') 替换为document.createElement("link") 并设置href 属性<link> 标签
@MiBol 我不这么认为，因为您的脚本像其他脚本一样在页面上运行。

【解决方案2】：

我将整个 jquery js 文件作为内联代码推送并且效果很好：

browser.ExecuteScriptAsync(File.ReadAllText(@"content\jquery.1.11.1.min.js"));

减少加载时间...

【讨论】：

什么不起作用？有错误信息吗？如果另一个 jQuery 版本已经加载到页面中，有时可能会发生冲突。否则我对这个变体从来没有任何问题。

【解决方案3】：

这很容易:)

 string script_1 = "document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'";

browser.ExecuteScriptAsync(script_1);

并用于调用任何自定义 jquery 函数或类：

 string script_2 = "$('.contact').css('color','#aabbcc');";

 browser.ExecuteScriptAsync(script_2);

【讨论】：