包含cef加载外部js的词条

发布时间：2023-12-08

包含cef加载外部js的词条

更新：2022-11-09 22:29

本文目录一览：

  1. JS文件中如何调用外部JS文件
  2. [如何用.net cefsharp调javascript方法](#如何用.net cefsharp调javascript方法)
  3. [C# 的cefsharp 里的ChromiumWebBrowser执行js](#C# 的cefsharp 里的ChromiumWebBrowser执行js)
  4. 如何动态加载外部CSS与JS文件
  5. 怎么重新加载js文件

JS文件中如何调用外部JS文件

  1. 创建一个文件夹，这个文件夹有一个js文件夹和一个html文件。js文件夹用来存放需要引入的js文件。
  2. 打开html文件，在html文件上找到body，在body标签里创建一个按钮标签，然后给这个标签添加一个点击addJs事件。
  3. 在js文件夹下创建一个js文件为addJs.js。
  4. 在addJs.js文件上输入一个alert弹出框并保存，当引入js文件成功就会执行alert弹出框。
  5. 回到html文件，在按钮输入框后面创建一个script标签，然后添加用来引入addJs.js文件的addJs事件。
  6. 保存html文件后使用浏览器打开，点击按钮即可看到出现一个弹出，表示引入js文件成功。

如何用.net cefsharp调javascript方法

CefSharp调用 js CefSharp.WinForms.ChromiumWebBrowser wb; ... 方式1. ExecuteScriptAsync 方法使用方式与 js 的 eval方法一样，异步执行，无返回值。

// xxx为js的方法名称
wb.ExecuteScriptAsync("xxx()");
// 为 js 的 变量jsVar赋值 'abc'
wb.ExecuteScriptAsync("jsVar='abc'");

方式2. EvaluateScriptAsync 方法使用方式与 js 的 eval方法一样，异步执行，有返回值。

Task<CefSharp.JavascriptResponse> t = wb.EvaluateScriptAsync("callTest2()");
// 等待js 方法执行完后，获取返回值
t.Wait();
// t.Result 是 CefSharp.JavascriptResponse 对象
// t.Result.Result 是一个 object 对象，来自js的 callTest2() 方法的返回值
if(t.Result.Result != null)
{
    MessageBox.Show(t.Result.Result.ToString());
}

C# 的cefsharp 里的ChromiumWebBrowser执行js

具体调用：

IBrowser browser = this._browser.GetBrowser();
if (browser.HasDocument)
{
    IFrame mainFrame = browser.MainFrame;
    var js = "var f= function A(){ return $('img',$('#"+id+"'));}; f();";
    var task = mainFrame.EvaluateScriptAsync(js, null);// "(function() { var body = document.body, html = document.documentElement; return Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); })();", null);
    //执行脚本
    //browser.MainFrame.ExecuteJavaScriptAsync("document.getElementById('testid').click();");
    //browser.MainFrame.ExecuteJavaScriptAsync("document.getElementById('testid2').value='123'");
    task.ContinueWith(t =>
    {
        if (!t.IsFaulted)
        {
            //返回结果
            var response = t.Result;
            var result = response.Success ? (response.Result ?? "null") : response.Message;
            //html = result.ToString();
        }
    }, TaskScheduler.FromCurrentSynchronizationContext());
}

如何动态加载外部CSS与JS文件

动态加载外部css样式及css样式，参考代码如下：

// 动态加载外部js文件
var flag = true;
if( flag ){
    loadScript( "js/index.js" );
};
function loadScript( url ){
    var script = document.createElement( "script" );
    script.type = "type/javascipt";
    script.src = url;
    document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载js
if( flag ){
    var script = document.createElement( "script" );
    script.type = "text/javascript";
    script.text = " ";
    document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载外部css样式
if( flag ){
    loadCss( "css/base.css" );
};
function loadCss( url ){
    var link = document.createElement( "link" );
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName( "head" )[0].appendChild( link );
};
// 动态加载css样式
if( flag ){
    var style = document.createElement( "style" );
    style.type = "text/css";
    document.getElementsByTagName( "head" )[0].appendChild( style );
    var sheet = document.styleSheets[0];
    insertRules( sheet,"#gaga1","background:#f00",0 );
};
function insertRules( sheet,selectorTxt,cssTxt,position ){
    if( sheet.insertRule ){ // 判断非IE浏览器
        sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position );
    }else if( sheet.addRule ){ //判断是否是IE浏览器
        sheet.addRule( selectorTxt ,cssTxt ,position )
    }
}

怎么重新加载js文件

加载js文件三种方法，如下：

  1. 重新加载js文件：
function loadJs(file) {
    var head = $("head").remove("script[role='reload']");
    $("<script/>").attr({ role: 'reload', src: file, type: 'text/javascript' }).appendTo(head);
}
  1. 给js定个id，重新加载：
function reloadAbleJSFn(id,newJS)
{
    var oldjs = null;
    var t = null;
    var oldjs = document.getElementById(id);
    if(oldjs) oldjs.parentNode.removeChild(oldjs);
    var scriptObj = document.createElement("script");
    scriptObj.src = newJS;
    scriptObj.type = "text/javascript";
    scriptObj.id = id;
    document.getElementsByTagName("head")[0].appendChild(scriptObj);
}
  1. jquery的就直接使用getScript就可以：
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
    $('#loadButton').click(function(){
        $.getScript('new.js',function(){
            newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数
        });
    });
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
</body>
推荐文章