WebView的使用详解

1、基本使用:

WebSetting 使用

WebSettings webSettings = webView.getSettings();

//设置是否支持缩放
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);

//设置是否显示缩放按钮
webSettings.setDisplayZoomControls(true);

//设置WebView是否允许执行JavaScript脚本,默认false,不允许
webSettings.setJavaScriptEnabled(true);

//设置自适应屏幕宽度
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);

更多设置参考:http://blog.csdn.net/a2241076850/article/details/52983939


WebViewClient 使用

WebViewClient为WebView处理请求与通知

webView.setWebViewClient(new WebViewClient() {
    //设置是否在WebView中处理url请求,若不重新,默认会调用浏览器打开
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        //返回true时,表示页面响应需自己处理,无法自动跳转,返回false则可以响应链接点击
        return false;
    }
});

WebChromeClient 使用

WebChromeClient为WebView处理JS对话框,网站图标,网站Title等内容

webView.setWebChromeClient(new WebChromeClient() {
    
    //显示加载进度
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        
        tv.setText(newProgress + "%");
    }
    
    //获取页面的Title
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        
        Toast.makeText(MainActivity.this, title, Toast.LENGTH_LONG).show();
    }

});

在WebView中使用JavaScript调用Android方法

a)调用webSetting的setJavaScript(true)启动JavaScript调用功能;

webSettings.setJavaScriptEnabled(true);

b)给Android中需要暴露给JavaScript的函数加注解

public class TestJavaScript {
    private Context context;

    public TestJavaScript(Context context){
        this.context = context;
    }

    /**
     * 暴露给JavaScript的接口
     * @param content
     */
    @JavascriptInterface
    public void showToast(String content){
        Toast.makeText(context,content,Toast.LENGTH_SHORT).show();
    }
}

c)调用WebView的addJavaScriptInterface(Object object, String name)方法将object对象暴露给JavaScript脚本;

webView.addJavascriptInterface(new TestJavaScript(MainActivity.this),"testJavaScript");

d)在JavaScript脚本中将通过上一步暴露的name对象调用Android方法;

<input οnclick="testJavaScript.showToast('测试')"/>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native的WebView是一个用于在应用程序中显示Web内容的组件。它是通过使用第三方库react-native-web-webview来实现的。您可以使用npm命令来安装这个库,例如: ``` $ npm install react-native-web-webview --save ``` 通过引入这个库,您可以在您的React Native应用程序中使用WebView组件来加载和显示Web页面。您可以使用属性如onLoad、onError、onMessage等来监听WebView的加载、错误和消息事件。例如,您可以通过onLoad来设置页面加载完成后的回调函数,通过onError来设置错误处理函数,通过onMessage来处理从Web页面发送的消息。您可以使用style属性来设置WebView的样式,source属性来指定要加载的Web页面的来源。 以下是一个示例代码,展示了如何使用WebView组件: ```jsx <WebView ref={(view) => (this.webView = view)} useWebKit={false} onLoad={() => { let data = { name: userInfo.usrName }; this.webView.postMessage(JSON.stringify(data)); }} onError={(event) => { console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`); }} onMessage={(event) => { this._onH5Message(event); }} automaticallyAdjustContentInsets={false} contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }} onScroll={(event) => this._onScroll(event)} style={styles.webview} source={this.html ? { html: this.html } : { uri: this.url }} bounces={false} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} /> ``` 请注意,这只是一个示例,您可以根据您的实际需求来调整和配置WebView组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [react-native-web-webview:React Native用于RN的WebView的Web实现](https://download.csdn.net/download/weixin_42165490/18797652)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ReactNative进阶(十):WebView 应用详解](https://blog.csdn.net/sunhuaqiang1/article/details/116158130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值