包含cef加載外部js的詞條

本文目錄一覽：

• 1、JS文件中如何調用外部JS文件
• 2、如何用.net cefsharp調javascript方法
• 3、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方法一樣，異步執行，有返回值。

TaskCefSharp.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’]”);

$(“scri” + “pt” + “/scr” + “ipt”).attr({ role: ‘reload’, src: file, type: ‘text/javascript’ }).appendTo(head);

}

2、給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);

}

3、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