browser控件的使用场景和示例代码以及集成JQuery Mobile

nandy007
   2013-06-22 10:41:19发布  2017-02-22 14:59:38更新 0收藏, 7316浏览
ExMobi客户端技术
0

自5.4.0之后推出的webview控件已经取代browser控件,如果需要使用标准HTML5+CSS3+JS请使用webview控件


static/image/hrline/4.gif

基于webview的HTML5框架Agile Lite支持原生体验的HTML5 http://bbs.exmobi.cn/thread-4012-1-1.html

先上示例代码

browser@fiberhome.zip(1.90M 下载次数:387)

浏览器控件使用的时候有几个关键参数需要注意下

islink
browser
属性
点击链接后内容在内嵌浏览器控件展现还是调用系统浏览器打开pc模拟器不支持。只要具有islink属性,不论为何值,都视为浏览器控件内部处理


4.0+


url
browser
属性
浏览器控件需加载页面地址。如为空或属性不存在则不进行加载。【注】浏览器控件自身仅支持后缀为.html.htm的文件视为网页打开。若文件后缀为其他格式如.xhtml.txt等,即使内容为标准网页,浏览器也不会当做网页打开,而只是显示文本。若adapter属性设置为true,相当于exmobi先将文件读取再调用loadData方法设置入浏览器控件中,因此可以显示为网页。所以对于.xhtml非网页格式的文件,必须设置adapter属性值为true,否则显示该页面代码。网络地址前缀必须是http:// 开头pc模拟器不支持android支持网络和本地文件,本地文件按照定义好的url规则,但是本地文件只支持打开htmltxt格式的文件iphone只支持网络地址


4.0+


adapter
browser
属性
url地址以http://,https://开始的网络地址时,是否经过Server的适配处理。详细描述参照adapter属性
false
4.4+


action
browser
属性
属性值为true时页面内的控件支持点击触发链接,为false或不存在该属性时不支持页面内控件的点击触发链接,默认为false即不触发链接。adaptertruefalse均生效
false
4.5+
4.2+

browser控件页面内容加载的三种方式:

方式一:设置browser的URL属性加载,url可以是http的网络地址也可以是res的客户端本地文件,比如:

< browser  url=http://bbs.exmobi.cn>

方式二:直接在browser控件里写html代码,注意html要包含在CDATA中,比如:

< browser>

<![CDATA[
<html>
        <head>
                <meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=3.0/>
                <style>
                .articleContent{font-size: 18px;line-height: 27px;margin-bottom:20px;padding-top:10px;color: #2C2C2C;word-wrap:break-word;overflow:hidden;}
                </style>
        </head>
        <body>
                <div style=text-align:center;>
                <h2>烽火星空发布MIAP云平台</h2>
                </div>
        </body>
</html>
]]>
</browser>

方式三:通过js给browser对象注入html,browserObj.loadData(html),比如:

<body onload=getFormAjax()>
< browser id=browser>
</browser>
</body>

可以通过js注入如下:

function getFormAjax(){
        var ajax = new Ajax('http://tech.sina.cn/?sa=t84v44d20853040&pos=searchatsina&vt=4','get','',doSuccess,'','',true);
        ajax.send();
}

function doSuccess(data){
        var rs = data.responseText;
        var browser = document.getElementById(browser);
        browser.loadData(rs);
}

附件是broser控件使用的一些场景和示例代码,其中“页面交互”中使用了JQuery Mobile(jqm)。

下载APP
扫码下载栗子社区APP