對於CDHtmlDialog和JavaScript、HTML配合使用的一些技術總結

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。若想刪除所有的節點，需採用上面雙迴圈的方式。