vs2010开发activex（MFC）控件/ie插件(一)

深碍√TFBOYSˉ_ 2022-08-20 14:18 322阅读 0赞

#  vs2010开发activex（MFC）控件/ie插件(一)    #

vs2010开发activex（MFC）控件：

** 第一步：生成activex控件**

**    ![Center][]**

**![Center 1][]**

**![Center 2][]**

**     第二步：添加对话框资源及其他控件，添加对话框类，设置对话框属性**

**![Center 3][]**

**![Center 4][]**

**![Center 5][]**

**![Center 6][]**

**     **

**第三步：**

**    **

**添加WM\_CREATE事件，选择”<添加>OnCreate”，以初始化对话框对象。**

int CTest\_jsCtrl::OnCreate(LPCREATESTRUCT lpCreateStruct)  
\{  
if (COleControl::OnCreate(lpCreateStruct) == -1)  
return -1;  
// TODO:  在此添加您专用的创建代码  
**m\_MyDlg.Create(IDD\_DIALOG1,this);  //初始化对话框**  
return 0;  
\}

**OnDraw函数中添加绘制对话框的代码**

// CTest\_jsCtrl::OnDraw - 绘图函数  
void CTest\_jsCtrl::OnDraw(CDC\* pdc, const CRect& rcBounds, const CRect& rcInvalid)\{  
if (!pdc)  
return;  
// TODO: 用您自己的绘图代码替换下面的代码。  
//pdc->FillRect(rcBounds, CBrush::FromHandle((HBRUSH)GetStockObject(WHITE\_BRUSH)));  
//pdc->Ellipse(rcBounds);  
**m\_MyDlg.MoveWindow(rcBounds,true);**  
\}

**![Center 7][]**

**   编译，生成ocx，编写测试的html文件：**

**   html中加载ocx控件的方法：**

**<BODY>  
<OBJECT ID="Test\_js" WIDTH=50% HEIGHT=35%   
 CLASSID="CLSID:80F40FB1-7366-4D8E-B2E9-B765E6740F98">  
    <PARAM NAME="\_Version" VALUE="65536">  
    <PARAM NAME="\_ExtentX" VALUE="2646">  
    <PARAM NAME="\_ExtentY" VALUE="1323">  
    <PARAM NAME="\_StockProps" VALUE="0">  
</OBJECT>**

**上述中的CLASSID：**

**![Center 8][]**

**    完整的html测试文件：**

**   **

<HTML>
    <HEAD>
    <TITLE>测试：js传参数给ie插件</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
    <SCRIPT LANGUAGE="JavaScript">
    function GetDeviceinfo()
    {
    if (Input1.value!="")
        {
          Test_js.paramer1= Input1.value;    
        }
    	//alert(Test_js.paramer1);
        if (Input2.value!="")
        {
           Test_js.paramer2= Input2.value;  
        }
    	  if (Input3.value!="")
        {
           Test_js.paramer3= Input3.value;  
        }
    	 if (Input4.value!="")
        {
           Test_js.paramer4= Input4.value;  
        }
    }
    function Test()
    {
    
    var p1=Test_js.paramer3;
    var p2=Test_js.paramer4;
    var a=Test_js.add(p1,p2)
    alert(a);
    }
    
    </SCRIPT>
    </HEAD>
    <BODY>
    <OBJECT ID="Test_js" WIDTH=50% HEIGHT=35% 
     CLASSID="CLSID:80F40FB1-7366-4D8E-B2E9-B765E6740F98">
        <PARAM NAME="_Version" VALUE="65536">
        <PARAM NAME="_ExtentX" VALUE="2646">
        <PARAM NAME="_ExtentY" VALUE="1323">
        <PARAM NAME="_StockProps" VALUE="0">
    </OBJECT>
    <p></p> 
    Inputparamer1: <INPUT TYPE ="text" NAME="Input1" VALUE="">
    Inputparamer2: <INPUT TYPE ="text" NAME="Input2" VALUE="">
    Inputparamer3： <INPUT TYPE ="text" NAME="Input3" VALUE="">
    Inputparamer4： <INPUT TYPE ="text" NAME="Input4" VALUE="">
    <p></p> 
    <INPUT TYPE="button" NAME="输入数据" 
           VALUE="测试js传参数: " ONCLICK=GetDeviceinfo()>
    <INPUT TYPE="button" NAME="测试" 
           VALUE="测试js调用activex接口函数: " ONCLICK=Test()>   
    </BODY>
    </HTML>

注意：对话框上的控件及处理，跟普通对话框一样不再说明。

**测试结果：**

**![Center 9][]**

[Center]: /images/20220731/369c61eff58c4d7496acf3ba3b79f3a6.png
[Center 1]: /images/20220731/ea26ea9f7f9747aea3cdd030382c3d95.png
[Center 2]: /images/20220731/16605ec47c224f4299e63d3866d6c87e.png
[Center 3]: /images/20220731/6f50a9b39e454de884bf57712cf3f098.png
[Center 4]: /images/20220731/62401d44dd824825a2668708a722a093.png
[Center 5]: /images/20220731/665172eaf6ff4355b74068fe74ae52f7.png
[Center 6]: /images/20220731/23d7365dc3234e648ba76db592493c71.png
[Center 7]: /images/20220731/7193a286988c4058bfc8b5aaeefdfe7b.png
[Center 8]: /images/20220731/823e20a5ef5c483ea855bd92e227de50.png
[Center 9]: /images/20220731/4b1558a644f24d218883bd77fee0ae1f.png