如何更改一个已经加载的webview组件的url地址

nandy007
   2015-07-13 15:08:39发布  2016-12-17 14:37:23更新 0收藏, 3190浏览
WebAPP技术
0

在ExMobi的uixml中使用webview加载html页面地址是很常用的方法,这种方法可以利用h5来填补uixml对于相对动态的页面数据的展现。

而很多开发者需要在首次加载webview之后还需要在此基础上跳转其他页面地址,那么我们知道,到目前为止,webview的js api并未提供方法可以直接更改url地址。(好消息是5.8.0版本已经支持webview对象的loadUrl方法可以直接为webview加载url显示)

那我们可以怎么做呢?这里我们就来介绍三种方式。根据性能效率和便捷性,推荐使用第三种,但是希望小伙伴们能够对各种方法都有所了解,灵活应用。


第一种:重置body的内容,重新构造webview

这种方法的基本思路在于,webview必须存在于body中,那么当需要更改webview的url时,我们重新往body放置一个新的webview,其url地址设置为新的html页面地址即可,代码如下:

//更改dom,将body的内容重置一个新的webview
function changeDom(){
     document.getElementById("body").innerHTML = '<webview id="webview" url="http://weixin.exmobi.cn:7003/www/agile/index.html"></webview>';
}

第二种:跳出一个新的uixml来打开新的webview加载新的url地址

这种方法就思路源自浏览器中常见的在新的tab页打开url,这种方式就相当于不同的url实际在新的窗口中打开。在ExMobi中url地址必须存在与uixml中,所以要达到类似效果就相当于打开新的uixml窗口。

//跳转到一个新的url地址
function redirect(){
//如果是打开本页面可以将新地址设置到session,如果是打开其他页面可以直接在其他页面打开心的url地址,自然区分开
     window.setStringSession('url', 'http://miap.cc:1001/process/service/p9line/index.html');
     window.open('res:page/index.uixml', false);
}

我们的示例代码中由于用的是同一个uixml页面,所以为了区分要打开url,我们可以把新打开的url地址设置到session中,这时候在第一次加载的时候就可以通过session中获取url,比如:

//初始化,往body添加webview
function init(){
     var url = window.getStringSession('url')||'http://m.baidu.com';
     document.getElementById("body").innerHTML = '<webview id="webview" url="' url '"></webview>';
     window.setStringSession('url', '');
}

第三种:通过桥接的方式执行webview中的html里的跳转函数

这种方式是来源于大家常见的html页面之间的跳转可以使用location.href,那么在uixml中如果可以执行html的函数就可以达到这个效果。

所以,这种方法的关键是要知道uixml中如何调用html的函数,这就涉及到桥接的概念,大家可以参考此贴http://bbs.exmobi.cn/thread-4272-1-1.html的说明。具体代码就比较简单了:

//初始化,往body添加webview
function init(){
     var url = window.getStringSession('url')||'http://m.baidu.com';
     document.getElementById("body").innerHTML = '<webview id="webview" url="' url '"></webview>';
     window.setStringSession('url', '');
}

最后奉上本次总结的示例代码

resetwebview.zip(0.14M 下载次数:71)

FC89EA453BF00550B8310E89F53AAC0C.png  (0.16M  下载次数:56次)

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