HTML中嵌套去边框方法
E webbrowser 网页嵌套去掉边框 隐藏滚动条
前一段时间升级了一个程序，将程序的主界面用网页来设计，效果非常好，用 HTML+CSS 可以实现更加丰富的界面效果，比直接用 Delphi 来得容易。
实现的方法很简单，在窗体添加一个 WebBrowser 组件，然后执行以下代码：
WebBrowser1.Navigate('D:\Soft\HomePage.html');
但随之而来出现了一个问题：WebBrowser 组件在未载入 HTML 之前是无边框的，当载入 HTML 之后，WebBrowser 四周出现了一个三维边框，和程序本身的风格极不协调，查看了 WebBrowser 的所有属性，没有属性可以改变这一设置。
经过测试以后发现，该边框并不是 WebBrowser 产生的，而是 WebBrowser 中载入的 HTML 产生的，如果是这样的话，那问题就好解决了，真接用 CSS 去掉边框：
body { border: 0px; overflow: auto; /*可自动隐藏或显示滚动条；设为 hidden 完全隐藏滚动条*/ }
当你高兴地设置以上 CSS 后，却发现 WebBrowser 的边框却依然存在，是 CSS 错了吗？NO，是你的 DOCTYPE 出了问题，以上的 CSS 在 XHTML 下是无效果的，将 DOCTYPE 设为 HTML4 即可：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
网上搜了一下，提问题的人不少，找到合适的答案不容易。我把自己曾经总结的贴出来，希望能够对需要的朋友有用。
HRESULT hr;
IDispatch *pDisp = GetHtmlDocument();
IHTMLDocument2 *pDocument = NULL;
IHTMLElement* pEl;
IHTMLBodyElement *pBodyEl;
hr = pDisp->QueryInterface(IID_IHTMLDocument2, (void**)&pDocument);
if(SUCCEEDED(pDocument->get_body(&pEl)))
{
if(SUCCEEDED(pEl->QueryInterface(IID_IHTMLBodyElement, (void**)&pBodyEl)))
{
pBodyEl->put_scroll(L"no");//去滚动条
}
IHTMLStyle *phtmlStyle;
pEl->get_style(&phtmlStyle);
if(phtmlStyle != NULL)
{
phtmlStyle->put_overflow(L"hidden");
phtmlStyle->put_border(L"none");// 去除边框
phtmlStyle->Release();
pEl->Release();
}
}
///////////////////////////////////////////////////////////////////////////////////
VC++ 怎样去掉webbrowser2 的滚动条
LPDISPATCH lpidsp=m_WebBrowser2.GetDocument();
ASSERT(lpidsp);
IHTMLDocument2 *pDoc=NULL;
HRESULT hr;
hr=lpidsp->QueryInterface(IID_IHTMLDocument2,(void**)&pDoc);
ASSERT(SUCCEEDED(hr));
ASSERT(pDoc);
IHTMLElement *pBody=NULL;
hr=pDoc->get_body(&pBody);
ASSERT(SUCCEEDED(hr));
ASSERT(pBody);
IHTMLElement *pElement=NULL;
hr=pBody->QueryInterface(IID_IHTMLElement,(void**)&pElement);
ASSERT(SUCCEEDED(hr));
ASSERT(pElement);
CComBSTR v("SCROLL");
CComVariant vv="no";
pElement->setAttribute(v,vv,0);
我的WebBrowser控件的原文件index.htm中的HTML代码如果是以下作为文件的顶级元素时,则无法去掉控件的边框和滚动条,如图1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Sys_Caption_Logo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<style type="text/css">
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url("0527blue.jpg");
padding: 0;
margin: 0px;
overflow:hidden;
border: 0px;
}
而将顶级元素改为如下代码时,则可以去掉边框和滚动条,只是图标显示不正常,明显小许多.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
请问,如何才能达到即去掉边框和滚动条,而又不会让图标变得如此之小?
废话不多说，今天要做一个功能，使用了WebBrowser控件，和大多数人一样，我想去掉控件本身的边框，因为这个3D边框很丑陋而且和背景不相容。
找了一圈，发现网上的方法都是针对没有Frameset的情况，也就是说，你的页面如果有Frameset构成，则使用css：
body
{
/*下面2句去掉webBrowser边框*/
border:0px;
overflow:hidden;
}
是不够的，边框仍然存在。
我的代码原来是
代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <link href="style.css" rel="stylesheet" type="text/css"/>
6 <title></title>
7 </head>
8 <frameset framespacing="0" frameboder="no" rows="44px,*">
9
10 <frame id="frameNav" scrolling="no" name="frameNav" src="navigation.html" border="none" frameborder="no" noResize="true"></frame>
11<frame id="frameContent"scrolling="no" name="frameContent" src="01-Content.html" border="none" frameborder="no" noResize="true"></frame>
12</frameset>
13
14</html>
后来改为：
代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link href="style.css" rel="stylesheet" type="text/css"/>
6<title></title>
7</head>
8<body>
9<iframe id="frameNav" frameborder="0" name="frameNav" height="44px" scrolling="no" width="699px" src="navigation.html"></iframe>
10<iframe id="frameContent" frameborder="0" name="frameContent" height="456px" scrolling="no" width="699px" src="01-Content.html"></iframe>
11</body>
12
13
14</html>
用iframe来替代frameset，测试发现边框去掉了。
哪位达人知道不改html代码怎么实现，希望不吝赐教，thanks~
前一段时间升级了一个程序，将程序的主界面用网页来设计，效果非常好，用 HTML+CSS 可以实现更加丰富的界面效果，比直接用 Delphi 来得容易。
实现的方法很简单，在窗体添加一个 WebBrowser 组件，然后执行以下代码：
WebBrowser1.Navigate('D:\Soft\HomePage.html');
但随之而来出现了一个问题：WebBrowser 组件在未载入 HTML 之前是无边框的，当载入 HTML 之后，WebBrowser 四周出现了一个三维边框，和程序本身的风格极不协调，查看了 WebBrowser 的所有属性，没有属性可以改变这一设置。
经过测试以后发现，该边框并不是 WebBrowser 产生的，而是 WebBrowser 中载入的 HTML 产生的，如果是这样的话，那问题就好解决了，真接用 CSS 去掉边框：
body { border: 0px; overflow: auto; /*可自动隐藏或显示滚动条；设为 hidden 完全隐藏滚动条*/ }
当你高兴地设置以上 CSS 后，却发现 WebBrowser 的边框却依然存在，是 CSS 错了吗？NO，是你的 DOCTYPE 出了问题，以上的 CSS 在 XHTML 下是无效果的，将 DOCTYPE 设为 HTML4 即可：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
网上搜了一下，提问题的人不少，找到合适的答案不容易。我把自己曾经总结的贴出来，希望能够对需要的朋友有用。
HRESULT hr;
IDispatch *pDisp = GetHtmlDocument();
IHTMLDocument2 *pDocument = NULL;
IHTMLElement* pEl;
IHTMLBodyElement *pBodyEl;
hr = pDisp->QueryInterface(IID_IHTMLDocument2, (void**)&pDocument);
if(SUCCEEDED(pDocument->get_body(&pEl)))
{
if(SUCCEEDED(pEl->QueryInterface(IID_IHTMLBodyElement, (void**)&pBodyEl)))
{
pBodyEl->put_scroll(L"no");//去滚动条
}
IHTMLStyle *phtmlStyle;
pEl->get_style(&phtmlStyle);
if(phtmlStyle != NULL)
{
phtmlStyle->put_overflow(L"hidden");
phtmlStyle->put_border(L"none");// 去除边框
phtmlStyle->Release();
pEl->Release();
}
}
///////////////////////////////////////////////////////////////////////////////////
VC++ 怎样去掉webbrowser2 的滚动条
LPDISPATCH lpidsp=m_WebBrowser2.GetDocument();
ASSERT(lpidsp);
IHTMLDocument2 *pDoc=NULL;
HRESULT hr;
hr=lpidsp->QueryInterface(IID_IHTMLDocument2,(void**)&pDoc);
ASSERT(SUCCEEDED(hr));
ASSERT(pDoc);
IHTMLElement *pBody=NULL;
hr=pDoc->get_body(&pBody);
ASSERT(SUCCEEDED(hr));
ASSERT(pBody);
IHTMLElement *pElement=NULL;
hr=pBody->QueryInterface(IID_IHTMLElement,(void**)&pElement);
ASSERT(SUCCEEDED(hr));
ASSERT(pElement);
CComBSTR v("SCROLL");
CComVariant vv="no";
pElement->setAttribute(v,vv,0);
我的WebBrowser控件的原文件index.htm中的HTML代码如果是以下作为文件的顶级元素时,则无法去掉控件的边框和滚动条,如图1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Sys_Caption_Logo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<style type="text/css">
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url("0527blue.jpg");
padding: 0;
margin: 0px;
overflow:hidden;
border: 0px;
}
而将顶级元素改为如下代码时,则可以去掉边框和滚动条,只是图标显示不正常,明显小许多.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
请问,如何才能达到即去掉边框和滚动条,而又不会让图标变得如此之小?
废话不多说，今天要做一个功能，使用了WebBrowser控件，和大多数人一样，我想去掉控件本身的边框，因为这个3D边框很丑陋而且和背景不相容。
找了一圈，发现网上的方法都是针对没有Frameset的情况，也就是说，你的页面如果有Frameset构成，则使用css：
body
{
/*下面2句去掉webBrowser边框*/
border:0px;
overflow:hidden;
}
是不够的，边框仍然存在。
我的代码原来是
代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <link href="style.css" rel="stylesheet" type="text/css"/>
6 <title></title>
7 </head>
8 <frameset framespacing="0" frameboder="no" rows="44px,*">
9
10 <frame id="frameNav" scrolling="no" name="frameNav" src="navigation.html" border="none" frameborder="no" noResize="true"></frame>
11<frame id="frameContent"scrolling="no" name="frameContent" src="01-Content.html" border="none" frameborder="no" noResize="true"></frame>
12</frameset>
13
14</html>
后来改为：
代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link href="style.css" rel="stylesheet" type="text/css"/>
6<title></title>
7</head>
8<body>
9<iframe id="frameNav" frameborder="0" name="frameNav" height="44px" scrolling="no" width="699px" src="navigation.html"></iframe>
10<iframe id="frameContent" frameborder="0" name="frameContent" height="456px" scrolling="no" width="699px" src="01-Content.html"></iframe>
11</body>
12
13
14</html>
用iframe来替代frameset，测试发现边框去掉了。
哪位达人知道不改html代码怎么实现，希望不吝赐教，thanks~