我们一般在使用android自带的webkit进行开发是遇到如下问题,

当网页中的页面本来定义大小为

<meta name="page-view-size" content="1280*720">

我们在调用时还是按照页面本来的大小写frame时

<div style="position:absolute; left:0px; top:0px; height:720px; width:1280px; " id="frameContrl1_div"><frame src="none.htm" name="frameContrl1"  width=100% height=100% scrolling="yes"></iframe></div>

会出现如下的界面,

Android FrameLayout用法 android iframe_无边框

我们发现在按上下左右的时候页面在晃动。按理说页面大小和屏幕大小一致本来不应该晃动,为什么出现这种显现呢。在郁闷了很久之后发现,原来在fream元素里面有一个frameborder项,该项是用来控制是否显示边框的。这里补充一些小知识:


Border 指定框架边框的宽度(以像素为单位)。 frameborder 指定框架边框是否以三维方式显示。yes或1----三维边框;no或0----平面边


frameborder 属性 -- HTML框架边框的显示方式 此属性应使用在frame标签中 frameborder属性取值: 1 -- 有边框 0 -- 无边框 默认值为1 border,中文"边框"的意思


W3school解释:


属性


描述

frameborder

  • 0
  • 1

规定是否显示框架周围的边框。


以上是从网上挡的一些解释,大概意思明白就行,本人菜鸟,具体意思也不是很了解。


一般情况我们定义的页面小于屏幕大小,这是不容易出现问题。但当页面和屏幕一样大的时候,问题就出现了。由于页面和屏幕本来一样大,加上边框就回大于屏幕。而android4.2上面对于fream该元素此项的默认设置为ture。也就是默认有边框,所以就回悲剧的出现边框晃动。修改的方法就是在webkit\soure\html\HTMLFrameElement.cpp文件中修改m_frameBorder的值为false即可。

 

如果页面中定义的是iframe而非frame则比较棘手。因为iframe本身没有自己的描述边框的成员变量,android自己的注释是这样的:// Frame border doesn't really match the HTML4 spec definition for iframes.  It simply adds  a presentational hint that the border should be off if set to zero.

所以只能默认就让该属性一直默认为边框宽度为零。需要在webkit\soure\html\HTMLIFrameElement.cpp文件中的void HTMLIFrameElement::parseMappedAttribute(Attribute* attr)函数中仿照if (attr->name() == frameborderAttr)的情况,在调用其他属性时触发该属性,目前是唯一解决方法。注意,这个设置本身是有漏洞的,如果ifream本身是需要支持边框的,而且网页设置边框的属性在宽度之前就会发现,宽度设置没有起到作用。

 我自己的测试页面如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="page-view-size" content="1280*720">
</head>
<body style="position:absolute; width:1280px; height:720px; left: 0px; top: 0px;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="transparent" onLoad="init()" onUnload="exit()">

<!-- <img style="position:absolute; left:1050px; top:30px;visibility: visible ;" src="images/none.gif"  id="PlayIconImg" /> -->
<!-- iframe1 -->
<!--<div style="position:absolute; left:0px; top:0px; height:720px; width:1280px; " id="frameContrl1_div"><iframe src="none.htm" name="frameContrl1"  width=100% height=100% scrolling="yes"></iframe></div>-->
<div style="position:absolute; left:0px; top:0px; height:720px; width:1280px; " id="frameContrl1_div"><iframe src="none.htm" name="frameContrl1"  width=100% height=100% scrolling="yes"></iframe> </div>

</body>
</html>