自定义TWebBrowser浏览器控制遇到的一些问题

最近工作需要，要将TWebBrowser样式改头换面，包括菜单，滚动条等，都要换掉。
由于滚动条已经屏蔽掉，所以关于页面滚动等，全部都需要自己写代码来模拟了。模拟的过程中发现获得页面的客户区大小ClientHeight,ClientWidth以及页面总大小ScrollHeight,ScrollWidth的时候，还有滚动条滑块位置ScrollTop,ScrollLeft的值总是有不对的情况，通过在网上查找才发现，原来是W3C标准在作怪，只要是使用了W3C标准格式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
作为开头的，我使用
((FWebBrowser.Document as IHTMLDocument2).body as IHTMLElement2).scrollTop这些获得的值都有问题，始终为0
而不用该格式的，都不会有问题。
那么使用了该格式的，用什么方法来获得呢！通过资料发现
FWebBrowser.oleobject.document.documentelement.ClientHeight;这样的方式来获得标准格式的各个值。
资料原文如下

JavaScript:
function IeTrueBody(){//判断头部是否有标准声明
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

通过这里我们可以看到，需要检查是否是标准文档，这个就需要document.compatMode的判断
资料如下：

转载:http://www.cnscn.org(CNS电脑与英语学习网)

声明:我写的博客就是我的学习笔记,让我在忘记的时候可以在任何时候,任何地方,打开连接就可以看到,让我想起忘记的东西.
我的博客通常都有资料来源,只用于学习,没有任何其他目的,如果有版权问题,请跟我联系,如果对资料有什么疑问，可以留言！
我的email:herhun@163.com

对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用，感觉这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

在实际的项目中，我们还需要在获取浏览是否IE，这样就可以得到IE的渲染模式了。在Ext中的代码：isBorderBox=isIE&&!isStrict。

当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"，因此，我们可以根据document.compatMode 的值来判断文档是否加了标准声明

var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight :document.body.clientHeight;

浏览器的两种模式

在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没深究怎么回事，只是零零碎碎的有些概念，最近终于受不了这种似懂非懂的感觉，决定好好学习总结一下。

1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注：Explorer 5仍然只支持quirks mode

4、浏览器如何判断何用哪种方式解析CSS？

解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则

浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。

对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：

对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析

在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。

可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

5、mozilla提出了almost strict moede ，和strict mode的区别是：

img元素在strict中是inline的，而在almost strict mode中是block的。其实我们前面所说，在大多数浏览器，大多数doctype声明触发的是almost strict mode;

6、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

而区别就是产生在width属性上：

在strict mode中 ：

width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在quirks mode中 ：

width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

这里把盒模式相关的东西记录一下，备忘 ！

·内联元素 ，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。注2. 内联元素（display: inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。

·边界值可为负，其显示效果各浏览器可能不相同 。

·填充值不可为负 。

·边框默认的样式（border-style）为不显示（none） 。

7、在quirks mode 和 strict mode中还有一个区别 ，但没经过验证，我只是发现有这个现象。

在strict mode 中，

table的css属性font-size会继承父级元素的 ，也就是说，table中的字体大小会继承父级元素字体的大小。

在quirks mode 中，

table的css属性font-size不会继承父级元素的 ，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。

8、在js中如何判断当前浏览器正在以何种方式解析？
    document对象有个属性compatMode ,它有两个值：
        BackCompat    对应quirks mode
        CSS1Compat    对应strict mode

在Delphi中判断代码如下：

procedure TDxSkinWebBrowser.CheckIfW3CStd;
var
compatMode: string;
begin
//判断文档是否有加标准声明
//当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"
//否则就为BackCompat
compatMode := FWebBrowser.oleobject.document.compatMode;
IsW3CStd := CompareText(compatMode,'CSS1Compat') = 0;
end;

所以，滚动控制就要加上这样一个判断，如果是标准的就使用
FWebBrowser.oleobject.document.documentelement.ClientHeight
否则就使用另一种方式：

DelphiCode:

 procedure TDxSkinWebBrowser.ReSetWebSize;

 var

   WebClientWidth,WebClientHeight: Integer;

   MaxScrollWidth, MaxScrollHeight: Integer;

   webPoint: TPoint;

 begin

   if (FWebBrowser.Document <> nil) and ((FWebBrowser.Document  as IHTMLDocument2).body <> nil) then

   begin

     {先获得页面的最大高度}

     if (FScrollBars = ssVertical) or (FScrollBars = ssBoth) then

     begin

       if IsW3CStd then //如果是W3C标准

          MaxScrollHeight := FWebBrowser.oleobject.document.documentelement.ScrollHeight

       else

          MaxScrollHeight := (FWebBrowser.Document  as IHTMLDocument2).body.getAttribute('ScrollHeight', 0);

       if MaxScrollHeight > FWebBrowser.Height  then //总高度大于显示高度度出现滚动条

       begin

          if IsW3CStd then

          begin

            WebClientHeight := FWebBrowser.oleobject.document.documentelement.ClientHeight;

            webPoint.Y := FWebBrowser.oleobject.document.documentelement.scrollTop;

          end

          else

          begin

            WebClientHeight := (FWebBrowser.Document as IHTMLDocument2).body.getAttribute('ClientHeight', 0);

            webPoint.Y := ((FWebBrowser.Document as IHTMLDocument2).body as IHTMLElement2).scrollTop;

          end;

          FVScrollBar.SetRange(0,MaxScrollHeight,webPoint.Y,WebClientHeight);

          FVScrollBar.Visible := true;

       end else FVScrollBar.Visible := False;

     end;

     if (FScrollBars = ssHorizontal) or (FScrollBars = ssBoth)  then

     begin

       if IsW3CStd then //如果是W3C标准

         MaxScrollWidth := FWebBrowser.oleobject.document.documentelement.ScrollWidth

       else

         MaxScrollWidth := (FWebBrowser.Document as IHTMLDocument2).body.getAttribute('ScrollWidth', 0);

       //总宽度大于显示宽度,出现滚动条

       if MaxScrollWidth > FWebBrowser.Width then

       begin

         if IsW3CStd then

         begin

           WebClientWidth := FWebBrowser.oleobject.document.documentelement.ClientWidth;

           webPoint.x := FWebBrowser.oleobject.document.documentelement.ScrollLeft;

         end

         else

         begin

           WebClientWidth := (FWebBrowser.Document as IHTMLDocument2).body.getAttribute('clientWidth', 0);

           webPoint.x := ((FWebBrowser.Document as IHTMLDocument2).body as IHTMLElement2).scrollLeft;

         end;

         FHScrollBar.SetRange(0,MaxScrollWidth,webPoint.X,WebClientWidth);

         FHScrollBar.Visible := True;

       end else FHScrollBar.Visible := False;

     end;

   end;

end;

http://blog.csdn.net/suiyunonghen/article/details/3735578

自定义TWebBrowser浏览器控制遇到的一些问题的更多相关文章

Jackson 通过自定义注解来控制json key的格式
Jackson 通过自定义注解来控制json key的格式最近我这边有一个需求就是需要把Bean中的某一些特殊字段的值进行替换.而这个替换过程是需要依赖一个第三方的dubbo服务的.为了使得这个转换 ...
[C# 网络编程系列]专题四：自定义Web浏览器
转自:http://www.cnblogs.com/zhili/archive/2012/08/24/WebBrowser.html 前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发 ...
Day 5-8 自定义元类控制类的实例化行为
__call__方法: 对象后面加括号,触发执行. 注:构造方法的执行是由创建对象触发的,即:对象 = 类名() :而对于 __call__ 方法的执行是由对象后加括号触发的,即:对象() 或者类( ...
自定义chromium浏览器
自定义chromium浏览器来源 https://chaopeng.me/blog/2018/08/17/how-to-develop-full-homebrew-browser.html 最近有 ...
转：【专题四】自定义Web浏览器
前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发出请求的正是本专题要介绍的Web浏览器,本专题通过简单自定义一个Web浏览器来简单介绍浏览器的工作原理,以及帮助一些初学者揭开浏览器这 ...
专题四：自定义Web浏览器
前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发出请求的正是本专题要介绍的Web浏览器,本专题通过简单自定义一个Web浏览器来简单介绍浏览器的工作原理,以及帮助一些初学者揭开浏览器这 ...
浏览器控制之 selenium,phantomJs谷无头浏览器
目录浏览器控制之 selenium,phantomJs谷无头浏览器 selenium phantomJs 需求是尽可能多的爬取豆瓣网中的电影信息谷歌无头浏览器浏览器控制之 selenium,ph ...
js自定义获取浏览器宽高
/** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...
MySQL自定义函数用法详解-复合结构自定义变量/流程控制
自定义函数 (user-defined function UDF)就是用一个象ABS() 或 CONCAT()这样的固有(内建)函数一样作用的新函数去扩展MySQL. 所以UDF是对MySQL功能的一 ...

随机推荐

hdu4753
很简单的位模拟(bit-mask),可惜队友读题误以为很难,没有及时跟我交流,不然应该很早就可以出了. 很容易看出来,总共才16个点.24条边.用一个int类型数字就可以描述这个图了,按照16点的关系 ...
Linux学习之awk命令
一. AWK 说明 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能 ...
std::string 字符替换函数
// 替换路径中所有“\”为“/” #include <algorithm> static std::string ConvertSlash(std::string& strUrl ...
poj 1769 Minimizing maximizer 线段树维护dp
题目链接给出m个区间, 按区间给出的顺序, 求出覆盖$ [1, n] $ 至少需要多少个区间. 如果先给出[10, 20], 在给出[1, 10], 那么相当于[10, 20]这一段没有被覆盖. 令 ...
详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
[大伽说]如何运维千台云服务器 » CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...
ODI利用goldengate实现增量数据捕获
ODI利用goldengate实现增量数据捕获上个月,Oracle发布了ODI的最新版本10.1.3.6_02,其中增加了针对采用goldengate获取源数据库增量变化的知识模块,这样当系统需要实 ...
深入理解Spring Redis的使用 (二)、RedisTemplate事务支持、序列化
RedisTemplate api详解 1. RedisTemplate的事务 private boolean enableTransactionSupport = false; private bo ...
《Linux 设备驱动程序》读后感。并发，竞态，死锁。
1. 概念并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. 来源: 1. Linux ...
python-面向对象(二)
面向对象总结面向对象是一种编程方式,此编程方式的实现是基于对类和对象的使用类是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例( ...
Choosing Between ElasticSearch, MongoDB & Hadoop
An interesting trend has been developing in the IT landscape over the past few years. Many new tech ...

自定义TWebBrowser浏览器控制遇到的一些问题

自定义TWebBrowser浏览器控制遇到的一些问题的更多相关文章

随机推荐

热门专题