OCX 与 JS 互调详解

首先我们观察一下项目的结构，方便后面操作

如上 类视图以及其他视图都可以从下图中找到答案

注意这个 类视图后面创建OCX 的Event事件要用到。

JS调用OCX

到上图的类视图 点添加事件

输入参数名,点添加自动生成代码

创建调度映射，让外部JS能够识别并调用

来到Ctrl.h文件中添加枚举标志

调试

// 给JS调用
int CMFCActiveXControl1Ctrl::beCallByJs(int param)
{
	MessageBox(_T("给JS调用"));
	return 10;
}

JS中

function test3(param)  
{  
   document.getElementById("jssTest1").beCallByJs(1);  
}  

OCX调用JS

添加事件，跟上面一样打开类视图

这里是用VS2013添加的，VS2017点添加会提示必须加入Event的问题，比较奇葩。

idl中的事件申明

ctrl.h中实现

不过不要慌，这些都是自动生成的，当然看下也好，玩意什么时候要自己动手呢。

调用

CallJSBackEvent(_T("草泥马"));

JS响应
方式一:attachEvent

window.onload =function(){
	alert("加载完毕，加载ocx事件");
	document.getElementById("jssTest1").attachEvent("CallJSBackEvent",test2); 		}
function test2(param)  {  
        alert("事件回传"+param)
}  

方式二:script

<script language="javascript" for="jssTest1" event="CallJSBackEvent(p)" type="text/javascript"> 
	//alert("回调函数发现:" + p); 
	test2(p);
</script>

注意

注意一、

使用Edge的话attachEvent是不生效的

注意二、
attachEvent和Script方式同时使用是不会被覆盖的，均会被调用

其他

一、关于IE不能调试的问题，直接下载一个插件即可
参考：https://www.cnblogs.com/cxying93/p/6586694.html

二、codebase 无需注册直接安装ocx

效果

三、卸载

regsvr32 /u 文件路径

四、AfxBeginThread

五、查看函数
这样我们再调试中就可以看到OCX的公开函数了

调试代码如下：

var ocx = new ActiveXObject("ACTIVEXDEMO.ActiveXDemoCtrl.1");
var test = ocx.ShowEdit("草泥马");

源代码

关注公众号

回复
互调 或 OCX
获取

还有更多干货分享…