对于CDHtmlDialog和JavaScript、HTML配合使用的一些技术总结
对于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。若想删除所有的节点，需采用上面双循环的方式。