wpf 客户端添加qq客服咨询

使用qq推广

站点：http://shang.qq.com/v3/widget.html

复制里面的html代码：

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=287728153&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:287728153:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

使用webbrower控件

因为需要加载html代码，所有使用可以加载html的控件，目前我知道的是webbrower和Frame。如果有其他可以推荐。

Xmal文件：

  <WebBrowser x:Name="wbQQ" Width="110" Height="34" Canvas.Left="-13" Canvas.Top="-15"  />

后台代码：

this.wbQQ.NavigateToString(_content);//这里面的字符串是html代码，frame不能直接加载字符串html呈现界面。

string _content = @"
            <html>
            <head>
                <title>qq</title>
            </head>
            <body  scroll=""no"">
                <a target=blank style=""position:absolute;auto;left:0; margin-left:0px;right:auto;margin-right:auto;height:auto;top:0;margin-top:0px;bottom:auto;margin-bottom:auto;""
                   href=""http://wpa.qq.com/msgrd?v=3&uin=287728153&site=qq&menu=yes"">
　　　　　　　　　　　<img border=""0"" alt=""QQ"" src=""http://wpa.qq.com/pa?p=2:287728153:52"" /> 
　　　　　　　　　　</a> 
　　　　　　　　</body> 
　　　　　　　　</html>";

1.webBrowser 隐藏滚动条

第一种方案：对WebBroswer控件处理。

首先需要添加系统COM引用 Microsoft HTML Object Library.dll

其次页面中需添加using mshtml;

在WebBroswer的LoadCompleted事件中添加如下代码

mshtml.HTMLDocument dom = (mshtml.HTMLDocument)_wb(使用的WebBroswer对象名称).Document; //定义HTML
dom.documentElement.style.overflow = "hidden"; //隐藏浏览器的滚动条
dom.body.setAttribute("scroll", "no"); //禁用浏览器的滚动条

第二种方案：在页面中处理如下:

需在html样式中添加<body scroll="no">

2.实现html内容对齐

HTML

　　<h1>绝对元素的对齐与偏移</h1>

　　<div>

　　<p id="lt" >左上角对齐&偏移</p>

　　<p id="lb" >左下角对齐&偏移</p>

　　<p id="rt" >右上角对齐&偏移</p>

　　<p id="rb" >右下角对齐&偏移</p>

　　</div>

CSS

　　div { position:relative; }

　　#lt { position:absolute;

　　auto; left:0; margin-left:8px;

　　right:auto; margin-right:auto;

　　height:auto; top:0; margin-top:8px;

　　bottom:auto; margin-bottom:auto; }

　　#lb { position:absolute;

　　240px; left:0; margin-left:8px;

　　right:auto; margin-right:auto;

　　height:18px; top:auto; margin-top:auto;

　　bottom:0; margin-bottom:8px; }

　　#cm { position:absolute;

　　200px; left:0; margin-left:auto;

　　right:0; margin-right:auto;

　　height:18px; top:0; margin-top:auto;

　　bottom:0; margin-bottom:auto;}

　　#rt { position:absolute;

　　220px; left:auto; margin-left:auto;

　　right:0; margin-right:8px;

　　height:18px; top:0;margin-top:8px;

　　bottom:auto; margin-bottom:auto; }

　　#rb { position:absolute;

　　auto; left:auto; margin-left:auto;

　　right:0; margin-right:8px;

　　height:auto; top:auto; margin-top:auto;

　　bottom:0;margin-bottom:8px; }

　　/* 隐去了不必要的规则 */

　　问题

　　想把绝对定位元素排列到它的定位最近的祖先元素的上、下、左、右4边上。还想将它从排列位置上进行偏移。还想为它设置尺寸或进行包裹。

　　解决方案

　　把样式赋给已选择的类和ID上：

　　n 用+VALUE和height:+VALUE为元素设定尺寸；

　　n 用auto和height:auto对元素进行包裹。

　　从左侧进行偏移：

　　n 用left:0和right:auto将元素左对齐；

　　n 用margin-left:+VALUE将元素从左侧向右偏移；

　　n 用margin-left:-VALUE将元素从左侧向左偏移。

　　从右侧进行偏移：

　　n 用right:0和left:auto将元素右对齐；

　　n 用margin-right:+VALUE将元素从右侧向左偏移；

　　n 用margin-right:-VALUE将元素从右侧向右偏移。

　　从顶端进行偏移：

　　n 用top:0和bottom:auto将元素顶端对齐；

　　n 用margin-top:+VALUE将元素从顶端向下偏移；

　　n 用margin-top:-VALUE将元素从顶端向上偏移。

　　从底端进行偏移：

　　n 用bottom:0和top:auto将元素底端对齐；

　　n 用margin-bottom:+VALUE将元素从底端向上偏移；

　　n 用margin-bottom:-VALUE将元素从底端向下偏移。

　　模式

　　绝对元素的左偏移

　　SELECTOR { position:absolute; left:0;right:auto;

　　margin-left:±VALUE;margin-right:auto; }

　　绝对元素的右偏移

　　SELECTOR { position:absolute; left:auto; right:0;

　　margin-left:auto; margin-right:±VALUE;}

　　绝对元素的顶端偏移

　　SELECTOR { position:absolute; top:0;bottom:auto;

　　margin-top:±VALUE;margin-bottom:auto; }

　　绝对元素的底端偏移

　　SELECTOR { position:absolute; top:auto; bottom:0;

　　margin-top:auto; margin-bottom:±VALUE; }

　　适用范围

　　此设计模式可应用于所有元素。

3.打开链接弹出设置

html里面a标签去掉属性target=blank ，这样就会直接调用qq组件。

第二种添加qq客户端方式

2.body里面

问题：加载页面的时候自动加载js脚本。但是点击客服的时候，弹出的不是窗口而是一个div。

渲染：

在html头 加标签 强制使用最新的ie渲染 <meta http-equiv="X-UA-Compatible" content="IE=edge">
强制使用最新的ie8渲染<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

参考：http://www.cnblogs.com/sung/p/3391264.html

wpf 客户端 添加qq客服咨询

wpf 客户端添加qq客服咨询