GeckoWebBrowser中的js，如何调用c#函数

通过webBrowser实现C#和javascript互调

实现步骤：

一、新建一个窗体，加入webBrowser控件

控件名：webBrowser1

二、在窗体后台代码加入如下定义

[System.Runtime.InteropServicesVisibleAttribute(true)]

public partial class Form1 : Form

{

}

三、加载网页

webBrowser1.Navigate(Application.StartupPath + "/UpDateReport")

webBrowser1.ObjectForScripting = this //这句必须，不然js不能调用C#

四、调用脚本方法

/// <summary>

/// 脚本方法

/// </summary>

/// <param name="tag">JS函数名|参数1|参数2</param>

/// <returns></returns>

private object EXEC_JS(System.Windows.Forms.WebBrowser webBrowser, string tag)

{

string[] args = tag.Split('|')

if (args.Length == 1)

{

return webBrowser.Document.InvokeScript(args[0], null)

}

else

{

object[] objects = new object[args.Length - 1]

Array.Copy(args, 1, objects, 0, objects.Length)

return webBrowser.Document.InvokeScript(args[0], objects)

}

}

五、C#调用脚本方法例子，可以有返回值

//JS方法

<script language="javascript">

function js_fun(args)

{

alert("我是通过js脚本d出的。你输入的内容是："+args)

return "JAVASCRIPT"

}

</script>

//C#代码

object returnvalue = EXEC_JS(webBrowser1, "js_fun|参数字符串")

MessageBox.Show("js方法返回值是：" + returnvalue.ToString())

六、JS调用C#方法的例子

//C#方法

public string Test(string args)

{

return "你输入的是："+args

}

//JS代码

<script language="javascript">

window.onload = function()

{

var CS_returnvalue= window.external.Test("aaa")

alert(CS_returnvalue)

}

</script>

重建配置文件试试 开始运行里面输入firefox -p -no-remote按提示创建新配置文件

一般是安装的扩展等有问题造成的建议在附加组件里面排查扩展，实在不行可以重建配置文件试试 如：

1.打开Firefox浏览器，在地址栏输入“about:config”打开

2.点击底部的确认按钮进入

3.在左边第一列找到“general.useragent.locale”这一项，然后双击，把框内内容改为你要的语言编码

4.关闭浏览器再打开即可

补充：Mozilla Firefox（正式缩写为 Fx，非正式缩写为FF），中文名为火狐，是由Mozilla基金会与开源团体共同开发的网页浏览器。Firefox是从Mozilla Application Suite派生出来的网页浏览器，从2005年开始，每年都被媒体PC Magazine选为年度最佳浏览器。Firefox 使用开放源码的网页排版引擎Gecko，Gecko 能够让浏览器尽可能按标准来显示网页内容。Firefox 内置了分页浏览、拼字检查、即时书签、下载管理器和自定义搜索引擎等等功能。

使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？

我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有：

Trident内核： 主要代表为IE浏览器

Gecko内核： 主要代表为Firefox

Presto内核： 主要代表为Opera

Webkit内核： 产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

Trident内核： 前缀为 -ms

Gecko内核： 前缀为 -moz

Presto内核： 前缀为 -o

Webkit内核： 前缀为 -webkit

来看一个简单的示例，早期写一个圆角 border-radius ，需要这样写：

.box {

  -moz-border-radius: 5px

  -webkit-border-radius: 5px

  -o-border-radius: 5px

  border-radius: 5px

}

这样编写代码，无形之中给前端人员增加了不少工作量，于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别？”

-prefix-free

为了解决手工书写前缀的问题，最早的一个解决方案是由 Lea Verou 提供的一个 -prefix-free脚本。你只需要在你的 .html 文件中插入一个 prefixfree.js 文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。

添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。

现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了 并没有什么用!  如果你真的想学习网页制作这门技术，你可以来这个群，前面是573，中间是82〇，最后是49〇， 在这里有最新的HTML课程 学习 也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 不是愿意学习或者自认不需要学习的就不要加了。

prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。

编辑器插件

除了prefixfree脚本之外，很多同学依赖于文本编辑器的插件来处理。这里来看看Sublime Text编辑器里是如何实现Autoprefixer功能的。

要在编辑器中安装 Autoprefixer 插件，首先需要你的环境中已经安装好了 Node.js 。你可以在命令终端执行：

node -v

来检测是否已安装，如果没有安装，请先安装。在这里假设你已具备Node.js环境。

现在开启你的Sublime Text编辑器，你可以同时按下 command + Shift + p 三个键，选择"Install Package"。然后搜索 Autoprefixer 。

现在你在你的Sublime Text中使用Autoprefixer功能。假设你在样式文件中输入：

.box {

  transform: rotate(45deg)

  border-radius: 5px

  box-shadow: 1px 1px 0 rgba(0,0,0,.25)

  transition: all .2s ease .1s

}

这个时候你只需要同时按下 Command + Shift + P 三个键，选择“Autoprefix CSS”，并且回车，就能得到下面这样的代码：

.box {

  -webkit-transform: rotate(45deg)

  transform: rotate(45deg)

  border-radius: 5px

  box-shadow: 1px 1px 0 rgba(0,0,0,.25)

  transition: all .2s ease .1s

}

如下图所示：

注：不同的配置，执行的效果不一样。详细可以点击 这里 查阅。

预处理器中的混合宏

随着CSS预处理器越来越普及，部分同学开始采用预处理器中的混合宏来处理CSS3前缀的事项。比如说 Compass ，里面就是使用Sass的mixin为CSS3需要带前缀的属性定制了一些mixin。还有类似于Stylus中的 nib 等。预处理器中的混合宏确实可以解决很多问题，但也产生了新的问题，就是它所使用的语法是全新的，如果要使用就必须重新学习，另外这类工具的演进速度通常都会跟不上浏览器的发展速度，这样也会造成其产生的CSS有过时的问题，有时候为了解决一些问题，还需要自己去写 mixins 。比如：

正如前面所说的，如果要跟上浏览器的演进，就需要不断的更新你的CSS3 mixins,不然就会造成你的代码不是最新的。其中Compass就存在这样的问题：

@import "compass"

.box {

  @include border-radius(5px)

}

编译出来的CSS：

.box {

  -moz-border-radius: 5px

  -webkit-border-radius: 5px

  border-radius: 5px

}

而现实却不尽人意，因为到写这篇文章为止，我们写圆角属性只需要：

.box {

  border-radius: 5px

}

各主流浏览器就能正常的解析。造成这个原因的时，Compass中的CSS3的mixin没有跟上步子去更新定义好的mixins

---