logo

iMAG移动应用开发指南

Web

网页控件,用来显示HTML网页内容。
网页内容可以来自本地HTML,也可以来自网址路径。

标签

标签名 描述 说明
web 网页标签 用来显示HTML网页内容

属性

属性名 取值 描述
id String id编码
style String
web样式,包括:
src String 要显示的网页地址
html String web标签之间显示的网页HTML内容,可以是完整的HTML网页,也可以是HTML片段,需要加 CDATA标记。
include String 引入的JS或CSS资源文件名,多个用逗号分隔,如include="jquery.js,main.css",js和css文件放到/res/default资源目录下。
scalable Boolean 是否可用手指缩放大小
true:可以缩放
false:不可缩放,默认值
baseurl URL 基准url地址,这是一个绝对地址,和html属性配合使用。html中的相对url地址可以根据这个基准地址得到绝对地址。
target String _blank:web中的链接使用第三方浏览器在新窗口中打开,默认值。
_self:web中的链接在当前页面中打开。
progress Boolean 当web内容来自网络时(src属性有效)是否显示加载进度条。
true:显示进度条
false:不显示进度条,默认值
onload Javascript Web控件初始化完成时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式
exec(script:String) script:Javascript脚本 None 执行Javascript脚本,可以用于把数据传递到web容器里执行。

控件详解

iMAG的web控件通过系统底层的WebView来实现,因此支持标准的HTML5,Javascript和CSS3。

● web控件标准用法

web控件在展示网页内容和统计图表时比较有用,也可以帮助我们进行复杂的网页内容排版。但WebView本身是很占手机系统资源的,因此不建议在一个iMAG页面里使用多个web控件。当我们有多段HTML内容需要展示的时候,最好是把这些HTML合并,通过一个web控件来显示,这样做可以避免WebView内存占过多带来的崩溃问题。

web控件的标准用法如下:

<imag>
	<page>
		<title>
			<center>
				<label>网页控件</label>
			</center>
		</title>
		<content>
			<web>
				<![CDATA[
				   <table border="1" cellpadding="0" cellspacing="0">
				     <tr>
				       <td>row 1, cell 1</td>
				       <td>row 1, cell 2</td>
				     </tr>
				     <tr>
				       <td>row 2, cell 1</td>
				       <td>row 2, cell 2</td>
				     </tr>
				       <td>row 3, cell 1</td>
				       <td>row 3, cell 2</td>
				     </tr>
				   </table>
				]]>
			<web>
		</content>
	</page>
</imag>

如上所示,web标签作为content标签的子节点存在,整个页面只有一个web控件,web的内容即content的全部内容。

注意 :因为内嵌的是HTML标签,所以这里必须使用CDATA

● 显示HTML

<imag>
    <page>
        <title>
            <center>
                <label>显示HTML</label>
            </center>
        </title>
        <content>
			<web>
			<![CDATA[
		    <html>
		        <head>
	            <style type="text/css">
                table.altrowstable {
                    font-family: verdana,arial,sans-serif;
                    font-size:11px;
                    color:#333333;
                    border-width: 1px;
                    border-color: #a9c6c9;
                    border-collapse: collapse;
                }
                
                table.altrowstable th {
                    border-width: 1px;
                    padding: 8px;
                    border-style: solid;
                    border-color: #a9c6c9;
                }
                
                table.altrowstable td {
                    border-width: 1px;
                    padding: 8px;
                    border-style: solid;
                    border-color: #a9c6c9;
                }
                
                .oddrowcolor {
                    background-color:#d4e3e5;
                }
                
                .evenrowcolor {
                    background-color:#c3dde0;
                }
                </style>
		        </head>
		        <body>
				    <table class="altrowstable" id="alternatecolor">
				        <tr class="evenrowcolor">
				            <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
				        </tr>
				        <tr class="oddrowcolor">
				            <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
				        </tr>
				        <tr class="evenrowcolor">
				            <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
				        </tr>
				        <tr class="oddrowcolor">
				            <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
				        </tr>
				        <tr class="evenrowcolor">
				            <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
				        </tr>
				        <tr class="oddrowcolor">
				            <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
				        </tr>
				    </table>
		        </body>
		    </html>
			]]>
			</web>
        </content>
    </page>
</imag>

效果:

这里显示的table表格是标准的HTML,并通过css设置table的样式。

● 显示网址内容

<web src="http://m.baidu.com"/>

效果:

● 显示加载进度条

<web src="http://m.baidu.com" progress="true"/>

● 设置链接打开方式

<web src="http://m.baidu.com" target="_self"/>

因为设置了target="_self",所以链接地址会在web容器内部打开,而不会弹出新窗口。

● 设置可缩放大小

<web src="http://m.baidu.com" scalable="true"/>

● 使用基准地址

<web baseurl="http://baike.baidu.com">
<![CDATA[
<div><a href="/view/11417682.htm">404错误代码</a></div>
<div><a href="/view/1229527.htm">2014年巴西世界杯</a></div>
<div><a href="/view/442490.htm">刘诗诗</a></div>
]]>
</web>

● 使用资源图片

web控件可以使用res目录下的本地资源图片,如:

<web> 
<![CDATA[
<html>
<body>
    <img src="icon_email.png"/>
</body>
</html>
]]>
</web>

此时img的src不带路径,默认使用的是资源目录res下的图片文件,而res下的图片会根据手机屏幕分辨率自动适配。

但因为web里的内容会自动根据屏幕密度进行缩放适配(用几个屏幕像素来显示一个点),所以使用res里的本地图片时,图片会被放大变得模糊。此时可以通过Javascript脚本动态生成CSS样式来处理图片,让图片按实际像素清晰显示:

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>使用资源图片</label>
            </center>
        </title>
        <content>
            <web> 
            <![CDATA[
<html>
<head>
    <script>
        var zoom = 1 / window.devicePixelRatio;
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = 'img {zoom:' + zoom + ';}';
        document.getElementsByTagName('head')[0].appendChild(style); 
    </script>
</head>
<body>
    <img src="portrait.png"/>
</body>
</html>
            ]]>
            </web>
        </content>
    </page>
</imag>

其中window.devicePixelRatio属性表示浏览器会用几个(iOS上是2个,Android设备上1.5个, 2个, 3个都有可能)像素点来渲染1个像素。举例来说,假设devicePixelRatio的值为2,一张100x100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。

上面的代码动态创建了一个style,并通过CSS样式zoom来缩小图片,将图片还原成实际像素显示。

● 动态设置src

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        $page.onload = function() {
            $('test_web').src = 'http://m.baidu.com';
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>动态设置src</label>
            </center>
        </title>
        <content>
            <web id="test_web"/>
        </content>
    </page>
</imag>

● 动态设置html

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        $page.onload = function() {
            $('test_web').html = '<html><body>HTML Content</body></html>';
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>动态设置html</label>
            </center>
        </title>
        <content>
            <web id="test_web"/>
        </content>
    </page>
</imag>

● 动态创建web

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        $page.onload = function() {
            var web = $C('<web id="test_web" src="http://m.baidu.com"></web>');
            $('test_content').add(web);
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>动态创建web</label>
            </center>
        </title>
        <content id="test_content">
        </content>
    </page>
</imag>

● 在web中调用外面定义的JS方法

可以在web中调用外面的JS方法,如:

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[      
        function doCall(phoneNumber) {
            $phone.call(phoneNumber, {dial:true});
        }
        
        function doDownload(url) {
           $http.download(url);
        }
        
        function doOpen(url) {
            $page.open(url, {target:'_self'});
        }
    ]]>  
    </script>
    <page>
        <title>
            <center>
                <label>调用外面的JS方法</label>
            </center>
        </title>
        <content>
            <web>
            <![CDATA[      
<p><a href="javascript:void(0)" onclick="$imag.exec('doCall(\'10086\')')">打电话</a></p>  
<p><a href="javascript:void(0)" onclick="$imag.exec('doDownload(\'http://a0.att.hudong.com/24/61/01300000237086129196615710452.jpg\')')">下载文件</a></p>  
<p><a href="javascript:void(0)" onclick="$imag.exec('doOpen(\'web_outexec.xml\')')">打开XML页面</a></p>                                            
            ]]>            
            </web>
        </content>     
    </page> 
</imag>

上面的代码定义了一个拨打电话的JS方法doCall,然后当点击web中的链接的时候,会调用这个方法来拨打电话。其中$imag.exec是web中内置的方法,它接受一个String类型的Javascript脚本,并在外面的JS容量内执行。注意,这里doCall里的参数单引号要加反斜杠进行转义。

● 在外面执行web中定义的JS方法(向web传值)

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[     
        $page.onload = function() {
            $('test_web').onload = function() {
                var script = 'document.body.innerHTML = "HTML Content";';
                $('test_web').exec(script);
            }
        }
    ]]> 
    </script>
    <page>
        <title>
            <center>
                <label>执行web中的JS方法</label>
            </center>
        </title>
        <content>
            <web id="test_web">
            <![CDATA[                    
            <html>                   
                <body>                        
                    <div id="contentDiv"></div>                    
                </body>                    
            </html>                
            ]]>            
            </web>
        </content>
    </page>
</imag>

如上面的例子所示,调用web中的exec方法可以在web容器中执行JS脚本,通过这种方式可以将外面的参数传递到web中执行,从而实现web容器内外数据交互。

注意:这里是在$page.onload里调用的,而且把web.exec(script)放到了web.onload事件里执行,这样确保web控件已经初始化了。另外要注意的是用web.exec(script)方法执行多条JS语句,要记得加分号“;”。

● 在外面获取web中JS变量的值

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[     
        function getWebJSValue() {
             $('test_web').exec('$imag.exec("setJSValue(\'" + window.navigator.userAgent + "\')");');
        }
        
        function getWindowLoaction() {
             $('test_web').exec('$imag.exec("setJSValue(\'" + window.location.href + "\')");');
        } 
         
        function setJSValue(value) {
            alert(value);
        }
    ]]>
    </script>
    <page style="background:white">
        <title>
            <center>
                <label>获取web中JS变量的值</label>
            </center>
        </title>
        <header>
            <row>
                <button onclick="getWebJSValue();" style="align:center">获取userAgent</button>
                <button onclick="getWindowLoaction();" style="align:center">获取当前网址</button>
                <button onclick="$('test_web').exec('window.history.go(-1)')" style="align:center">后退</button>
            </row>
        </header>
        <content>
            <web id="test_web" src="http://m.baidu.com"></web>
        </content>
    </page>
</imag>

在外面不能直接取到Web容器里的JS变量的值,不过可以通过相互调用的方式来间接取值。上面的例子在setJSValue()回调方法里取到了Web的window.navigator.userAgent和window.location.href的值。

$('test_web').exec('window.history.go(-1)')可以用来控制网页前进和后退。

效果:

● 引入JS文件

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>引入JS文件</label>
            </center>
        </title>
        <content>
            <web include="jquery.js">
            <![CDATA[
<!doctype html>
<html>
<head>
  <title>fadeIn demo</title>
  <style>
  span {
    color: red;
    cursor: pointer;
  }
  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  </style>
</head>
<body>
 
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( document.body ).click(function() {
  $( "div:hidden:first" ).fadeIn( "slow" );
});
</script>
 
</body>
</html>
            ]]>
            </web>
        </content>
    </page>
</imag>

效果:

上面的例子引入的jquery,并通过jquery实现渐变动画效果。
jquery.js文件放在/res/default资源目录下:

● 使用Canvas绘图

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>使用Canvas绘图</label>
            </center>
        </title>
        <content>
            <web> 
            <![CDATA[
<html>
<head>
    <title>Canvas</title>
</head>
<body>
    <canvas id="test_canvas" width="300" heigth="150" style="background:#BBBBBB"></canvas>
    <script>
        var canvas = document.getElementById('test_canvas');
        var ctx = canvas.getContext('2d');
        var width = canvas.width;
        var height = canvas.height;
        var text = '测试文字';
        
        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#666';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, width / 2, height / 2);
    </script>
</body>
</html>
            ]]>
            </web>
        </content>
    </page>
</imag>

效果:

上面的代码通过Canvas在屏幕上绘制文字,关于Canvas API具体请参考:HTML 5 <canvas> 标签

● Canvas撑满屏幕

要让Canvas撑满屏幕显示,可以通过body和canvas的CSS样式来进行设置,将canvas的position设置为fixed。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>Canvas撑满屏幕</label>
            </center>
        </title>
        <content>
            <web> 
            <![CDATA[
<html>
<head>
    <title>Canvas</title>
    <style>
    body {
        margin:0;
        padding:0;
    }
    canvas {
        position:fixed;
        width:100%;
        height:100%;
    }
    </style>
</head>
<body>
    <canvas id="test_canvas" style="background:#BBBBBB"></canvas>
    <script>
        var canvas = document.getElementById('test_canvas');
        var ctx = canvas.getContext('2d');
        var width = canvas.width;
        var height = canvas.height;
        var text = '测试文字';

        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#666';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, width / 2, height / 2);
    </script>
</body>
</html>
            ]]>
            </web>
        </content>
    </page>
</imag>

效果:

● Canvas高清显示

Canvas在高清屏幕手机上会显示模糊,是因为浏览器会用几个(iOS上是2个,Android设备上1.5个, 2个, 3个都有可能)像素点来渲染1个像素导致的。iMAG框架已经对这一问题进行了处理,需要在web里引入iMAG内置的canvas.js,如:

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>Canvas高清显示</label>
            </center>
        </title>
        <content>
            <web include="canvas.js"> 
            <![CDATA[
<html>
<head>
    <title>Canvas</title>
    <style>
    body {
        margin:0;
        padding:0;
    }
    canvas {
        position:fixed;
        width:100%;
        height:100%;
    }
    </style>
</head>
<body>
    <canvas id="test_canvas" style="background:#BBBBBB"></canvas>
    <script>
        var canvas = document.getElementById('test_canvas');
        var ctx = canvas.getContext('2d');
        var width = canvas.canvasWidth;
        var height = canvas.canvasHeight;
        var text = '测试文字';

        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#666';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, width / 2, height / 2);
    </script>
</body>
</html>
            ]]>
            </web>
        </content>
    </page>
</imag>

上面的代码在web标签上增加了 include="canvas.js",并将原来JS代码里的canvas.widthcanvas.height改成了canvas.canvasWidthcanvas.canvasHeight
其中canvasWidth和canvasHeight是iMAG框架增加的属性,之所以增加新属性是因为webkit内核限制,不能像Firefox那样可以通过Object.prototype.watch()Object.observe()来监听属性的改动。 因此代码里用到canvas.width和canvas.height的地方都要手动改成canvas.canvasWidth和canvas.canvasHeight。

效果:

● Canvas统计图表

iMAG内置了awesomechart.js用来显示统计图表,关于AwesomeChart的示例请参考Github上的Demo:AwesomeChartJS

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page orientation="landscape">
        <title>
            <center>
                <label>Canvas统计图表</label>
            </center>
        </title>
        <content>
            <web include="awesomechart.js,canvas.js"> 
            <![CDATA[
                <html>
                    <head>
                        <style>
                        body {
                            margin:0;
                            padding:0;
                        }
                        canvas {
                            position:fixed;
                            width:100%;
                            height:100%;
                        }
                        </style>
                    </head>
                    <body>
                        <canvas id="chartCanvas13" width="350" height=350">
                            Your web-browser does not support the HTML 5 canvas element.
                        </canvas>
                        <script>
                            var chart13 = new AwesomeChart('chartCanvas13');
                            chart13.chartType = "pareto";
                            chart13.title = "Worldwide browser market share: December 2010";
                            chart13.data = [51.62,31.3,10.06,4.27,1.96,0.78];
                            chart13.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
                            chart13.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
                            chart13.chartLineStrokeStyle = 'rgba(0, 0, 200, 0.5)';
                            chart13.chartPointFillStyle = 'rgb(0, 0, 200)';
                            chart13.draw();
                        </script>
                    </body>
                </html>
            ]]>
            </web>
        </content>
    </page>
</imag>

效果:

引入awesomechart.js的同时引入canvas.js以适配高清屏的手机,iMAG内置的AwesomeChart已经在相应代码处进行了修改:

● WebView开发相关资料

移动前端开发之viewport的深入理解

Pixel-Perfect UI in the WebView

HTML和CSS高级指南之四——响应式设计

Responsive设计和CSS3 Media Queries的结合

示例下载

点此下载web相关的示例代码:imag-web.zip