对于CDHtmlDialog和JavaScript、HTML配合使用的一些技术总结

转自：http://blog.csdn.net/pjl1119/article/details/7713892

CDHtmlDialog可以方便的将网页嵌入对话框，使得在程序设计中人机界面（DHTML网页）与控制逻辑（CDialog）可以很好的分离。

 

1、屏蔽安全性提示，不再弹出控件是否安全的提示框。

重载CanAccessExternal()函数，直接 return TRUE;

头文件中：virtual BOOL CanAccessExternal();

.cpp中：

BOOL CBaseDHtmlDialog::CanAccessExternal()

{

 return TRUE;

}

 

2、拦截系统默认的右键菜单

重载ShowContextMenu函数。

头文件中：virtual HRESULT STDMETHODCALLTYPE ShowContextMenu(DWORD dwID,POINT *ppt,IUnknown *pcmdtReserved,IDispatch *pdispReserved);

.cpp中：

HRESULT STDMETHODCALLTYPE CBaseDHtmlDialog::ShowContextMenu(DWORD dwID,  POINT *ppt,  IUnknown *pcmdtReserved,  IDispatch *pdispReserved)

{

      return S_OK;

}

 

3、拦截一些系统快捷键

头文件中：STDMETHOD(TranslateAccelerator)(LPMSG lpMsg, const GUID *pguidCmdGroup, DWORD nCmdID);

HRESULT STDMETHODCALLTYPE CBaseDHtmlDialog::TranslateAccelerator(LPMSG lpMsg, 

                 const GUID *pguidCmdGroup, 

                 DWORD nCmdID)

{

 if (lpMsg && lpMsg->message == WM_KEYDOWN)

 {

  bool bCtrl = (0x80 == (0x80 & GetKeyState(VK_CONTROL)));

  // prevent Ctrl+N

  if (lpMsg->wParam == 'N' && bCtrl)

  {

   return S_OK;

  }

  // prevent Ctrl+F

  if (lpMsg->wParam == 'F' && bCtrl)

  {

   return S_OK;

  }

  // prevent F5

   if (lpMsg->wParam == VK_F5)

   {

    return S_OK;

   }

  // prevent ESC

  if (lpMsg->wParam == VK_ESCAPE)

  {

   return S_OK;

  }

  // prevent ENTER

  if (lpMsg->wParam == VK_RETURN)

  {

   return S_OK;

  }

 }

 return CDHtmlDialog::TranslateAccelerator(lpMsg, pguidCmdGroup, nCmdID);

}

 

4、添加滚动条

BOOL CBaseDHtmlDialog::OnInitDialog()

{

 SetHostFlags(DOCHOSTUIFLAG_FLAT_SCROLLBAR|DOCHOSTUIFLAG_NO3DBORDER);//必须在 CDHtmlDialog::OnInitDialog();之前

 CDHtmlDialog::OnInitDialog();

 m_pBrowserApp->put_Silent(VARIANT_TRUE);//屏蔽警告提示

 return TRUE;

}

 

5.数据处理尽量交给JavaScript，Dialog只做有意义的事。

IE先于CDHtmlDialog处理个事件，如鼠标事件。

6.从CDHtmlDialog调用网页中JavaScript函数的方法。

其中pDoc指针参数可通过CDHtmlDialog::GetDHtmlDocument(&pDoc)函数获得； strFunctionName指示函数名； dispParams为传给函数的参数列表，其使用方法请查阅MSDN相关文档； varResult为函数返回值； exceptInfo为JavaScript函数执行时抛出的异常； nArgErr返回第一个出错的参数的下标，由于参数列表中参数的逻辑顺序为JavaScript函数定义的参数的顺序的逆序，所以应特别注意该返回值所指示的具体位置。

HRESULT CallJSFunction(IHTMLDocument2* pDoc2, CString strFunctionName, DISPPARAMS dispParams, VARIANT* varResult, EXCEPINFO* exceptInfo, UINT* nArgErr )

{

IDispatch *pDispScript = NULL;

HRESULT hResult;

hResult = pDoc2->get_Script(&pDispScript);

if(FAILED(hResult)) { return S_FALSE; }

DISPID dispid;

CComBSTR objbstrValue = strFunctionName;

BSTR bstrValue = objbstrValue.Copy();

OLECHAR *pszFunct = bstrValue ;

hResult = pDispScript->GetIDsOfNames(IID_NULL, &pszFunct,1, LOCALE_SYSTEM_DEFAULT, &dispid);

if (S_OK != hResult)

{ pDispScript->Release();

return hResult; }

varResult->vt = VT_VARIANT;

hResult = pDispScript->Invoke(dispid, IID_NULL, LOCALE_USER_DEFAULT, DISPATCH_METHOD, &dispParams, varResult, exceptInfo, nArgErr);

pDispScript->Release();

return hResult;

}

 

7.JavaScript通过external调用CDHtmlDialog的方法。

<1>让CDHtmlDialog对象自身支持自动化 EnableAutomation();（只要是从CCmdTarget派生下来的类都可以支持，放在构造函数或Create重载函数中）

<2>将自身暴露给Script引擎： SetExternalDispatch(GetIDispatch(TRUE)); （将浏览器控件的扩展接口设置为对话框自身的IDispatch ，放在CMyDHTMLDialog::OnInitDialog中调用）

<3>声明DISPATCH_MAP。在头文件中添加 DECLARE_DISPATCH_MAP()

<4>定义DISPATCH映射（MyDHTMLDialog.cpp）

BEGIN_DISPATCH_MAP(CMyDHtmlDialog, CDHtmlDialog)

   DISP_FUNCTION(CMobileThemesHtml,"OnExternalTrackMenu",OnTrackMenu,VT_NULL,VTS_I4)  

   DISP_FUNCTION(CMobileThemesHtml,"OnExternalCheckboxClick",OnCheckboxClick,VT_NULL,VTS_I4 VTS_I4 VTS_I4)

END_DISPATCH_MAP()

<5>函数实现

OnExternalTrackMenu为HTML中JavaScript调用的函数，如：

<INPUT id="Button1" type="button" value="Button1" name="Button1"

onclick="external.OnExternalTrackMenu(this.id);">

OnTrackMenu为VC++中的响应函数。如：void CMyDHtmlDialog::OnTrackMenu(int id)

参数VT_NULL（以VT开头），表示传给JavaScript的参数，若无，用VT_NULL代替。

参数VTS_I4表示JavaScript中返回的参数，以VTS开头，如无参数，用VTS_NONE代替。可有多个，如：

void CMyDHtmlDialog::OnCheckboxClick(int nTotalNumber,int nSelectedNumber,int nSystemThemeNumber)

 

8、响应HTML中控件的另一种方法

BEGIN_DHTML_EVENT_MAP(CMyDHtmlDialog)

  DHTML_EVENT_CLASS(DISPID_HTMLELEMENTEVENTS_ONMOUSEDOWN, _T("img_cls"), OnButtonImage)

END_DHTML_EVENT_MAP()

 

DISPID_HTMLELEMENTEVENTS_ONMOUSEDOWN：为鼠标点击方式，有多种；

img_cls：为HTML中一控件的class名称；

OnButtonImage：VC++中的响应函数。

 

9、调用JavaScript函数时，向其传递多个参数。

 参数传入的顺序，与JavaScript中的参数反序对应。

BOOL CMyDHtmlDialog::AddThemeToHtml(LPCTSTR name,  float size,  LPCTSTR picpath,    int id,  bool bSystemTheme)

{

 CComVariant* pvars = new CComVariant[5];

 DISPPARAMS dispParams = { pvars, NULL, 5, 0 };

 

 //ID

 pvars[0].vt = VT_INT;

 pvars[0].intVal= id;

 //路径

 pvars[1].vt = VT_BSTR;

 CComBSTR bstr2 = picpath ;

 bstr2.CopyTo(&pvars[1].bstrVal);

 //大小

 CString csSize;

 csSize.Format(_T("%.1fM"), size);

 pvars[2].vt = VT_BSTR;

 CComBSTR bstr1 = csSize ;

 bstr1.CopyTo(&pvars[2].bstrVal);

 //名称

 pvars[3].vt = VT_BSTR;

 CComBSTR bstr0 = name ; 

 bstr0.CopyTo(&pvars[3].bstrVal);

  pvars[4].vt = VT_INT;

 pvars[4].intVal= bSystemTheme ? 1 : 0;

 

 BOOL bResult = CallJsFunc(_T("AddNode"),dispParams,pvars);

 delete [] pvars;

 return bResult;

}

 

BOOL CMyDHtmlDialog::CallJsFunc(CString szFuncName,DISPPARAMS dispParams,CComVariant* vResult)

{

 HRESULT hr = S_OK;

 CComPtr<IDispatch> spScript;

 if (m_spHtmlDoc==NULL)

 {

  return FALSE;

 }

 hr = m_spHtmlDoc->get_Script(&spScript);

 if (FAILED(hr))

 {

  return FALSE;

 }

 CComBSTR bstrFunc(szFuncName);

 DISPID dispid = 0;

 hr = spScript->GetIDsOfNames(IID_NULL, &bstrFunc, 1, LOCALE_SYSTEM_DEFAULT, &dispid);

 if (FAILED(hr))

 {

  spScript.Release();

  return FALSE;

 }

 EXCEPINFO except;

 memset(&except, 0, sizeof(except));

 UINT nArgErr = (UINT)-1; //initialize to invalid arg

 hr = spScript->Invoke(dispid, IID_NULL, 0, DISPATCH_METHOD,

  &dispParams, vResult, &except, &nArgErr);

 if (FAILED(hr))

 {

  spScript.Release();

  return FALSE;

 }

 spScript.Release();

 return TRUE;

}

 

JavaScript中对应的函数：

function AddNode(bSystemTheme,name,size,picpath,id)

  {

   total_number ++;

   if (bSystemTheme==1) systheme_total ++;

            var myElement = document.createElement('li');

            myElement.className = "li_cls";

            myElement.id = id+"li";

            if (bSystemTheme==0)

            {

                myElement.onmouseout=function(){Hide(this.id)};

                myElement.onmouseover=function(){Show(this.id)};

            }

            document.getElementById("frame").appendChild(myElement);

           var chkbox = document.createElement('input');

           chkbox.type="checkbox";

           chkbox.id=id+"thm";

           chkbox.className="chk_cls";

           chkbox.name=id;

     chkbox.onmouseup= function(){ProcWhenSelectorChange(this.checked, bSystemTheme)};

           myElement.appendChild(chkbox); 

  

           var span1 = document.createElement('span');

           span1.className="cap_td";

           span1.title=name;

           span1.innerHTML=name;

           myElement.appendChild(span1);

           var span2 = document.createElement('span');

           span2.className="wgt_td";

           if (bSystemTheme==1) size=size+"(内置)";

           span2.innerHTML=size;

           myElement.appendChild(span2);

           var img1 = document.createElement('img');

           img1.className="img_show";

           img1.src=picpath; 

           img1.id=id+"thm"; 

           img1.onmousedown=function(){ClinkMouseBtnDown(event,this.id,bSystemTheme)};

           img1.onmouseup=function(){ClinkImageUp(event,id)};

           myElement.appendChild(img1); 

           if (bSystemTheme==0)

           {

                var btn = document.createElement('button');

                btn.className="lnkbtn";

                btn.innerHTML="卸载";

                btn.onmouseup= function(){ClinkButtonUp(event,id)};

                myElement.appendChild(btn); 

           }

     }

 

10、悬浮按钮的实现方法

鼠标移至某控件（如img）上时，出现按钮，鼠标移开后，按钮消失。

方法1：将图片作为按钮父元素的背景图片。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>TEST</title>

<script language="JavaScript" type="text/javascript"> 

 function Show() { var tmp = document.getElementById("lnkbtn");

   tmp.style.display="inline";}   

  function Hide(){ var tmp = document.getElementById("lnkbtn");

   tmp.style.display="none";}    

</script>

<style  type="text/css">

#lnkbtn{font:normal bold 12px/130% "Microsoft YaHei",serif; white-space: nowrap;

   cursor:hand; color:#5f7e4b; display:none;}

#Layer1 {position:absolute; width:500px; height:315px; z-index:1;

 background-image: url(E://test.jpg);background-repeat: no-repeat;}

</style>

</head>

<body >

    <div id="Layer1" onmouseover="Show()" onmouseout="Hide()">

        <button id="lnkbtn"> 刷新</button>

    </div>

</body>

</html>

 

方法2：图片和按钮都采用绝对坐标

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>TEST</title>

<script language="JavaScript" type="text/javascript"> 

 function Show(id) { var tmp = document.getElementById(id);

   tmp.nextSibling.style.display="inline";}   

  function Hide(id){ var tmp = document.getElementById(id);

   tmp.nextSibling.style.display="none";}    

</script>

<style  type="text/css">

.li_cls {background: transparent;position: relative;display: inline-block;

    width:150px;height:280px; overflow: hidden;

    float: left;margin: 0px 30px 30px 4px;border:1px solid rgb(60,60,235);}   

#lnkbtn {font:normal bold 12px/130% "Microsoft YaHei",serif;white-space: nowrap;cursor:hand;

   position: absolute;color:#5f7e4b;display:none;width:40px;height:25px;left:55px; top:221px; }

#img_show{position: absolute; height:230px; width:138px; left:5px;top:46px;}

</style>

</head>

<body >

    <div class="li_cls">

        <img id="img_show" src="E://test.jpg" alt="郁金香"  onmouseover="Show(this.id)" onmouseout="Hide(this.id)"/>

        <button id="lnkbtn"> 刷新 </button>

    </div>

</body>

</html>

 

11、在JavaScript中删除HTML的节点时，获取的节点数会随着删除动作的进行而逐渐减小。

function RemoveAllNodes()

  {

      var myform = document.getElementById("frame");

      var nodes = myform.childNodes;

     

      while (nodes.length != 0){

           for(var i = 0; i < nodes.length; i++){

                  myform.removeChild(nodes[i]);

          }

      }

  }
如上：每次removeChild成功后，nodes数组的大小会减1。若想删除所有的节点，需采用上面双循环的方式。