HTML5学习总结-10 Android 控件WebView显示网页

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。

　　webview有两个方法：setWebChromeClient 和 setWebClient

1)setWebClient：主要处理解析，渲染网页等浏览器做的事情

　　WebViewClient就是帮助WebView处理各种通知、请求事件的。

2)setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等。

1 在Activity_main.xml

添加一个WebView组件

<WebView

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/webView"

    />

2 在AndroidManifest.xml设置访问网络权限

<uses-permission android:name="android.permission.INTERNET" />

3 在MainActivity中设置可以与JS可交互性

package com.example.helloworld;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        WebSettings webSetting = webView.getSettings();

        webSetting.setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient());

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

}

3.1）加载外部资源：

package com.example.helloworld;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        WebSettings webSetting = webView.getSettings();

        webSetting.setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient());

       webView.loadUrl("http://baidu.com");

  }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

}

显示效果如下图所示：

3.2)加载本地资源

　　把oldForm.html页面放在assets目录下

package com.example.helloworld;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        WebSettings webSetting = webView.getSettings();

        webSetting.setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient());

               webView.loadUrl("file:///android_asset/oldForm.html");

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

}

oldForm.html

<!DOCTYPE html>

<html>

  <head>

    <title>oldForm.html</title>

<meta charset="utf-8" />

    <script type="text/javascript" languate="javascript">

      function showRangeValue1(){

            var inputRanage= document.getElementById("inputRanage").value;

            document.getElementById("showRange").innerHTML= inputRanage;

      }

      function SayHello(){

         alert("Hello guangzhou.");

      }

      function testJS(){

         document.getElementById("testDiv").innerHTML="Hello guangzhou! It is "+new Date();

      }

      function formReset()

{

document.getElementById("register").reset();

document.getElementById("inputName").value ="";

}

    </script>

  </head>

  <body>

<form action="/Html5Studio/action/GetHtml5Form" method="post" id="register" >

</form>

   username: <input type="text" id="inputName" name="inputName" form="register" value=""/> <br/>

   year: <select name="inputYear" form="register"  >

                <option value=""></option>

                <option value=""></option>

         </select> <br/>

   description: <textarea name="inputDescription" form="register" value="" ></textarea>  <br/>

 <hr/>

  Email: <input type="email" name="inputEmail" form="register" value="" required placeholder="请输入合法的Email."/> <br/>

  Url: <input type="url" name="inputUrl" form="register" value=""  /><br/>

 Date: <input type="date" name="inputDate" form="register"><br/>

 Time: <input type="time" name="inputTime" form="register"><br/>

 Month: <input type="month" name="inputMonth" form="register"><br/>

 Week: <input type="week" name="inputWeek" form="register"><br/>

 Number: <input type="number" min="" max="" step="" value="" id="inputNumber" name="inputNumber"/><br/>

 Range: <input type="range" min="" max="" step="" value="" id="inputRanage" name="inputRanage" onClick="showRangeValue1()" />

        <div id="showRange"></div> <br/>

 Search: <input type="search" value="" name="inputSearch" results="n"/> <br/>

 Color: <input type="color" name="inputColor"/>    <br/>

 Tel: <input type="tel" name="inputTel" value="" />    <br/> 

   <input type="submit" value="Submit"  form="register" />

   <input type="reset" onclick="formReset()"  value="Reset" form="register"/>

 <input type="button" onclick="formReset()" value="Reset form">

   <input type="button" value="SayHello" onclick="SayHello()">

   <input type="button" value="testJS" onclick="testJS()">

    <div id="testDiv"></div>

  </body>

</html>

参考资料：

http://pixy.iteye.com/blog/1044890

http://www.cnblogs.com/shawn-xie/archive/2012/08/15/2638480.html

HTML5学习总结-10 Android 控件WebView显示网页的更多相关文章

HTML5学习总结-11 IOS 控件WebView显示网页
一加载外部网页 1.使用UIWebView加载网页运行XCode 新建一个Single View Application . 2 添加安全消息添加以下消息到项目的 Info.plist &l ...
Android：控件WebView显示网页
WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要 ...
Android：控件WebView显示网页 -摘自网络
WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要 ...
安卓，网页控件，显示网页 Android, web controls, display web pages
安卓,网页控件,显示网页Android, web controls, display web pages 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq ...
Android 控件的显示隐藏上下左右移动动画
一.利用Android提供的左右移动工具类:AnimationUtils 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 LinearLayout ll_fi ...
Android控件_TextView(显示文本框控件)
一.TextView控件的常用属性 1.android:id——控件的id 2.android:layout_width——设置控件的宽度 wrap_content(包裹实际文本内容) fill ...
Android控件重叠显示小记
方案一利用布局控件显示优先级在xml中RelativeLayout,FrameLayout,靠后的控件显示在上层. 利用margin属性 margin属性可以控制控件间的距离,属性值为正值时,越大 ...
Android 之用WebView显示网页
WebView可以使得网页轻松的内嵌到 app 里,还可以直接跟js相互调用. WebView有两个方法:setWebChromeClient 和 setWebClient (1) setWebCli ...
通过js给android控件WebView设padding
项目中有个界面是用来显示一个网页的,很简单,放个WebView就ok了,可是返回按钮放在哪 ,ui的设计是在底部显示一个半透明的条,左边有一个返回按钮.这个条显示在内容上面.我有一个担心,就是要是最下 ...

随机推荐

[网站公告]3月10日23:00-4:00阿里云SLB升级，会有4-8次连接闪断
大家好,阿里云将于3月10日23:00-4:00对负载均衡服务(SLB)做升级操作,升级期间SLB网络连接会有约4-8次闪断.由此给您带来麻烦,敬请谅解! 阿里云SLB升级公告内容如下: 尊敬的用户: ...
误人子弟的网络，谈谈HTTP协议中的短轮询、长轮询、长连接和短连接
引言最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...
[已开源/文章教程]独立开发一个社交 APP 的源码/架构分享 (已上架)
0x00 背景真不是和被推荐了2天的博客园一位大神较真,从他那篇文章的索引式文章内容也学习到了很多东西,看评论区那么多对社交APP源码有兴趣的,正巧我上周把我的一个社交APP开源了,包括androi ...
GWT-Dev-Plugin（即google web toolkit developer plugin）for Chrome的安装方法
如果你想要在Chrome中进行GWT调试,需要安装“gwt developer plugin for chrome”,但是普通安装模式下,会提示: This application is not su ...
Redis Sentinel：集群Failover解决方案（转载）
本文转载自:http://shift-alt-ctrl.iteye.com/blog/1884370 文中的配置例子,还有failover过程中触发的订阅事件具有很好的参考价值. Redis sent ...
xml文件的生成与解析
生成方法一:同事StringBuffer类对xml文件格式解析写入 package com.steel_rocky.xml; import android.app.Activity; import a ...
git标签
git标签如果你达到一个重要的阶段,并希望永远记住那个特别的提交快照,你可以使用 git tag 给它打上标签.-a 选项意为"创建一个带注解的标签". 添加标签命令: $ gi ...
Spring MVC 相关资料整理
来源于:http://www.cnblogs.com/ylhssn/p/4062757.html 1.概述 Spring MVC是一种基于Java实现MVC设计模式的请求驱动类型的轻量级Web框架,即 ...
extJs学习基础
显示和隐藏所有的组件都是在show和hide方法中构造的.用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了: Ext.onReady(fun ...
Linux服务器配置git服务
前言 Git是一个非常著名的分布式版本控制系统,而广大开发者更是习惯在最大的远程仓库GitHub上提交自己的代码.但是有时候,一些小项目不值得放到GitHub上去,或是由于隐私问题不好在GitHub的 ...

HTML5学习总结-10 Android 控件WebView显示网页

HTML5学习总结-10 Android 控件WebView显示网页的更多相关文章

随机推荐

热门专题