您的位置：首页 > 移动开发 > Android开发

android webview 正常显示 Html中的 iframe和frame

2014-04-10 17:16 399 查看

我们一般在使用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>

会出现如下的界面，

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

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

frameborder 属性 -- HTML框架边框的显示方式 此属性应使用在frame标签中 frameborder属性取值: 1 -- 有边框 0 -- 无边框 默认值为1 border，中文"边框"的意思 W3school解释：属性 值 描述
frameborder 0
1
规定是否显示框架周围的边框。
以上是从网上挡的一些解释，大概意思明白就行，本人菜鸟，具体意思也不是很了解。

属性	值	描述
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航