Android：你要的WebView与 JS 交互方式都在这里了

万次阅读 多人点赞 2017-03-22 09:19:45

前言现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝...今天我将全面介绍Android通过WebView与JS交互的全面方式阅读本文前请先阅读：Android开发：最全面、最易懂的Webview详解 ...

前言
现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图

上述功能是由Android的WebView实现的，其中涉及到Android客户端与Web网页交互的实现
今天我将全面介绍Android通过WebView与JS交互的全面方式

阅读本文前请先阅读：Android开发：最全面、最易懂的Webview详解

#目录

1. 交互方式总结
Android与JS通过WebView互相调用方法，实际上是：
Android去调用JS的代码
JS去调用Android的代码

二者沟通的桥梁是WebView

对于Android调用JS代码的方法有2种：
通过WebView的loadUrl（）
通过WebView的evaluateJavascript（）
对于JS调用Android代码的方法有3种：
通过WebView的addJavascriptInterface（）进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
2. 具体分析
2.1  Android通过WebView调用 JS 代码
对于Android调用JS代码的方法有2种：
通过WebView的loadUrl（）
通过WebView的evaluateJavascript（）
方式1：通过WebView的loadUrl（）
实例介绍：点击Android按钮，即调用WebView JS（文本名为javascript）中callJS（）
具体使用：
步骤1：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

为了方便展示，本文是采用Andorid调用本地JS代码说明；
实际情况时，Android更多的是调用远程JS代码，即将加载的JS代码路径改成url即可

需要加载JS代码：javascript.html
// 文本名：javascript
<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
// JS代码
     <script>
// Android需要调用的方法
   function callJS(){
      alert("Android调用了JS的callJS方法");
   }
</script>

   </head>

</html>

步骤2：在Android里通过WebView设置调用JS代码
Android代码：MainActivity.java

注释已经非常清楚

 public class MainActivity extends AppCompatActivity {

    WebView mWebView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView =(WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

        button = (Button) findViewById(R.id.button);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 通过Handler发送消息
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {

                        // 注意调用的JS方法名要对应上
                        // 调用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });
                
            }
        });

        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体，内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }

        });


    }
}


特别注意：JS代码调用一定要在 onPageFinished（） 回调之后才能调用，否则不会调用。

onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用

方式2：通过WebView的evaluateJavascript（）
优点：该方法比第一种方法效率更高、使用更简洁。

因为该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。
Android 4.4 后才可使用

具体使用
// 只需要将第一种方法的loadUrl()换成下面该方法即可
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

2.1.2 方法对比

2.1.3 使用建议
两种方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2
// Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
if (version < 18) {
    mWebView.loadUrl("javascript:callJS()");
} else {
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

2.2 JS通过WebView调用 Android 代码
对于JS调用Android代码的方法有3种：
通过WebView的addJavascriptInterface（）进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
2.2.1 方法分析
方式1：通过 WebView的addJavascriptInterface（）进行对象映射
步骤1：定义一个与JS对象映射关系的Android类：AndroidtoJs
AndroidtoJs.java（注释已经非常清楚）
// 继承自Object类
public class AndroidtoJs extends Object {

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS调用了Android的hello方法");
    }
}

步骤2：将需要调用的JS代码以.html格式放到src/main/assets文件夹里
需要加载JS代码：javascript.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>  
      <script>
         
        
         function callAndroid(){
        // 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
      </script>
   </head>
   <body>
      //点击按钮则调用callAndroid函数
      <button type="button" id="button1" "callAndroid()"></button>
   </body>
</html>

步骤3：在Android里通过WebView设置Android类与JS代码的映射

详细请看注释

public class MainActivity extends AppCompatActivity {

    WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);

        // 通过addJavascriptInterface()将Java对象映射到JS对象
        //参数1：Javascript对象名
        //参数2：Java对象名
        mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象

        // 加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");



特点
优点：使用简单

仅将Android对象和JS对象映射即可

缺点：存在严重的漏洞问题，具体请看文章：你不知道的 Android WebView 使用漏洞
方式2：通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url
具体原理：
Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url
解析该 url 的协议
如果检测到是预先约定好的协议，就调用相应方法

即JS需要调用Android的方法

具体使用：
步骤1：在JS约定所需要的Url协议
JS代码：javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
         function callAndroid(){
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }
      </script>
</head>

<!-- 点击按钮则调用callAndroid（）方法  -->
   <body>
     <button type="button" id="button1" "callAndroid()">点击调用Android代码</button>
   </body>
</html>

当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后，就会回调shouldOverrideUrlLoading （），接下来继续看步骤2：
步骤2：在Android通过WebViewClient复写shouldOverrideUrlLoading （）
MainActivity.java
public class MainActivity extends AppCompatActivity {

    WebView mWebView;
//    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 步骤1：加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


// 复写WebViewClient类的shouldOverrideUrlLoading方法
mWebView.setWebViewClient(new WebViewClient() {
                                      @Override
                                      public boolean shouldOverrideUrlLoading(WebView view, String url) {

                                          // 步骤2：根据协议的参数，判断是否是所需要的url
                                          // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
                                          //假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

                                          Uri uri = Uri.parse(url);                                 
                                          // 如果url的协议 = 预先约定的 js 协议
                                          // 就解析往下解析参数
                                          if ( uri.getScheme().equals("js")) {

                                              // 如果 authority  = 预先约定协议里的 webview，即代表都符合约定的协议
                                              // 所以拦截url,下面JS开始调用Android需要的方法
                                              if (uri.getAuthority().equals("webview")) {

                                                 //  步骤3：
                                                  // 执行JS所需要调用的逻辑
                                                  System.out.println("js调用了Android的方法");
                                                  // 可以在协议上带有参数并传递到Android上
                                                  HashMap<String, String> params = new HashMap<>();
                                                  Set<String> collection = uri.getQueryParameterNames();

                                              }

                                              return true;
                                          }
                                          return super.shouldOverrideUrlLoading(view, url);
                                      }
                                  }
        );
   }
        }



特点
优点：不存在方式1的漏洞；
缺点：JS获取Android方法的返回值复杂。

如果JS想要得到Android方法的返回值，只能通过 WebView 的 loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：

// Android：MainActivity.java
mWebView.loadUrl("javascript:returnResult(" + result + ")");

// JS：javascript.html
function returnResult(result){
    alert("result is" + result);
}

#方式3：通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
在JS中，有三个常用的对话框方法：

方式3的原理：Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框

（即上述三个方法），得到他们的消息内容，然后解析即可。
下面的例子将用**拦截 JS的输入框（即prompt（）方法）**说明 ：

常用的拦截是：拦截 JS的输入框（即prompt（）方法）
因为只有prompt（）可以返回任意类型的值，操作最全面方便、更加灵活；而alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 / 取消）两个值

步骤1：加载JS代码，如下：
javascript.html

以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
        
	function clickprompt(){
    // 调用prompt（）
    var result=prompt("js://demo?arg1=111&arg2=222");
    alert("demo " + result);
}

      </script>
</head>

<!-- 点击按钮则调用clickprompt()  -->
   <body>
     <button type="button" id="button1" "clickprompt()">点击调用Android代码</button>
   </body>
</html>

当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了上述JS代码后，就会触发回调onJsPrompt（），具体如下：

如果是拦截警告框（即alert()），则触发回调onJsAlert（）；
如果是拦截确认框（即confirm()），则触发回调onJsConfirm（）；

步骤2：在Android通过WebChromeClient复写onJsPrompt（）
public class MainActivity extends AppCompatActivity {

    WebView mWebView;
//    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


        mWebView.setWebChromeClient(new WebChromeClient() {
                                        // 拦截输入框(原理同方式2)
                                        // 参数message:代表promt（）的内容（不是url）
                                        // 参数result:代表输入框的返回值
                                        @Override
                                        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                                            // 根据协议的参数，判断是否是所需要的url(原理同方式2)
                                            // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
                                            //假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

                                            Uri uri = Uri.parse(message);
                                            // 如果url的协议 = 预先约定的 js 协议
                                            // 就解析往下解析参数
                                            if ( uri.getScheme().equals("js")) {

                                                // 如果 authority  = 预先约定协议里的 webview，即代表都符合约定的协议
                                                // 所以拦截url,下面JS开始调用Android需要的方法
                                                if (uri.getAuthority().equals("webview")) {

                                                    //
                                                    // 执行JS所需要调用的逻辑
                                                    System.out.println("js调用了Android的方法");
                                                    // 可以在协议上带有参数并传递到Android上
                                                    HashMap<String, String> params = new HashMap<>();
                                                    Set<String> collection = uri.getQueryParameterNames();

                                                    //参数result:代表消息框的返回值(输入值)
                                                    result.confirm("js调用了Android的方法成功啦");
                                                }
                                                return true;
                                            }
                                            return super.onJsPrompt(view, url, message, defaultValue, result);
                                        }

// 通过alert()和confirm()拦截的原理相同，此处不作过多讲述

                                        // 拦截JS的警告框
                                        @Override
                                        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                                            return super.onJsAlert(view, url, message, result);
                                        }

                                        // 拦截JS的确认框
                                        @Override
                                        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                                            return super.onJsConfirm(view, url, message, result);
                                        }
                                    }
        );


            }

        }


Demo地址

上述所有代码均存放在：Carson_Ho的Github地址 ： WebView Demo
2.2.2 三种方式的对比 & 使用场景

3. 总结
本文主要对Android通过WebView与JS的交互方式进行了全面介绍

关于WebView的系列文章对你有所帮助
Android开发：最全面、最易懂的Webview详解
Android：你不知道的 WebView 使用漏洞
手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案
接下来我会继续讲解其他安卓开发的知识，有兴趣可以继续关注Carson_Ho的安卓开发笔记！！！！
请帮顶和评论点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注carson_ho的微信公众号

收起

展开全文

Android WebView Hybrid

videojs中文文档详解

万次阅读 多人点赞 2018-07-05 10:31:23

最近弄视频直播，网上没有全面的中文文档，只好自己整理了一份详细的api。Video.js是一款web视频播放器，支持...引入video.js和video-js.css，使用video标签就像下面这样： &lt;video id="e...

最近弄视频直播，网上没有全面的中文文档，只好自己整理了一份详细的api。Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。

官方网站
 下载最新版videojs

入门使用

查看DEMO | DEMO下载

引入video.js和video-js.css

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

使用video标签就像下面这样：

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  </video>

videojs使用方式就是以类似的方式开始的，不过由于我们借助videojs对视频进行一些控制或制定

var player = videojs('example_video_1',{
    muted: true,
	controls : true/false,      
	height:300, 
	width:300,
	loop : true,
	// 更多配置.....
});

常用事件

播放 this.play()
停止 – video没有stop方法，可以用pause 暂停获得同样的效果
暂停 this.pause()
销毁 this.dispose()
监听 this.on(‘click‘,fn)
触发事件this.trigger(‘dispose‘)

var options = {};
 
var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
  videojs.log(‘播放器已经准备好了!‘);
 
  // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
  this.play();
 
  // How about an event listener?<br>  // 如何使用事件监听？
  this.on(‘ended‘, function() {
    videojs.log(‘播放结束了!‘);
  });
});

常用选项

autoplay : true/false 播放器准备好之后，是否自动播放【默认false】
controls : true/false 是否拥有控制条【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
height: 视频容器的高度，字符串或数字单位像素比如： height:300 or height:‘300px‘
width: 视频容器的宽度, 字符串或数字单位像素
loop : true/false 视频播放结束后，是否循环播放
muted : true/false 是否静音
poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
preload:预加载
‘auto‘ 自动
’metadata‘ 元数据信息，比如视频长度，尺寸等
‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
children: Array | Object 可选子组件从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。

options 选项

标准元素选项
这些选项中的每一个也可用作标准元素属性 ; 因此，可以使用设置指南中列出的所有三种方式定义它们。通常，未列出默认值，因为这是留给浏览器供应商的。

autoplay

类型： boolean
如果true/作为属性存在，则在播放器准备就绪时开始播放。

注意：从iOS 10开始，Apple autoplay在Safari中提供支持。有关详细信息，请参阅“新增功能。

controls

类型： boolean
确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。

height

类型： string|number
设置视频播放器的显示高度（以像素为单位）。

loop

类型： boolean
使视频一结束就重新开始。

muted

类型： boolean
默认情况下会静音任何音频。

poster

类型： string
在视频开始播放之前显示的图像的URL。这通常是视频的框架或自定义标题屏幕。一旦用户点击“播放”，图像就会消失。

preload

类型： string
建议浏览器是否应在加载元素后立即开始下载视频数据。支持的值是：
‘auto’
立即开始加载视频（如果浏览器支持）。某些移动设备不会预加载视频，以保护用户的带宽/数据使用。这就是为什么这个价值被称为’汽车’，而不是更具决定性的东西’true’。
这往往是最常见和推荐的值，因为它允许浏览器选择最佳行为。
‘metadata’
仅加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据将通过下载几帧视频来加载。
‘none’
不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。

src

类型： string
要嵌入的视频源的源URL。

width

类型： string|number
设置视频播放器的显示宽度（以像素为单位）。

Video.js特定的选项

undefined除非另有说明，否则默认情况下每个选项

aspectRatio

类型： string
将播放器置于流体模式，并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号（例如"16:9"或"4:3"）分隔的两个数字。

autoSetup

类型： boolean
阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。

注意：必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。

children

类型： Array|Object
此选项继承自基Component类。

fluid

类型： boolean
何时true，Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器。

此外，如果元素具有"vjs-fluid"，则此选项自动设置为true。

inactivityTimeout

类型： number
Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。

在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout，用户永远不会被视为非活动状态。

language

键入：string，默认值：浏览器默认值或’en’
与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言，但始终可以更改。

在Video.js中了解有关语言的更多信息。

languages

类型： Object
自定义播放器中可用的语言。此对象的键将是语言代码，值将是具有英语键和翻译值的对象。

在Video.js中了解有关语言的更多信息

注意：通常，不需要此选项，最好将自定义语言传递给videojs.addLanguage()所有玩家！

nativeControlsForTouch

类型： boolean
明确设置关联技术选项的默认值。

notSupportedMessage

类型： string
允许覆盖Video.js无法播放媒体源时显示的默认消息。

playbackRates

类型： Array
严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。如果指定，Video.js显示控件（类vjs-playback-rate）允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。

例如：

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});

plugins

类型： Object
这支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}
  }
});

以上大致相当于：

var player = videojs('my-player');

player.foo({bar: true});
player.boo({baz: false});

虽然，由于plugins选项是对象，因此无法保证初始化顺序！

有关Video.js插件的更多信息，请参阅插件指南。

sources

类型： Array

一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组。例如：

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

使用元素将具有相同的效果：

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>

techCanOverridePoster

类型： boolean

使技术人员有可能覆盖玩家的海报并融入玩家的海报生命周期。当使用多个技术时，这可能很有用，每个技术都必须在播放新源时设置自己的海报。

techOrder

输入：Array，默认值：[‘html5’]

定义Video.js技术首选的顺序。默认情况下，这意味着Html5首选技术。其他注册的技术将在此技术之后按其注册顺序添加。

vtt.js

类型： string

允许覆盖vtt.js的默认URL，该URL可以异步加载到polyfill支持WebVTT。

此选项将用于Video.js（即video.novtt.js）的“novtt”版本中。否则，vtt.js与Video.js捆绑在一起。

组件选项

Video.js播放器是一个组件。与所有组件一样，您可以定义它包含的子项，它们出现的顺序以及传递给它们的选项。

这是一个快速参考; 因此，有关Video.js中组件的更多详细信息，请查看组件指南。

children

类型： Array|Object

如果Array- 这是默认值 - 这用于确定哪些子节点（按组件名称）以及在播放器（或其他组件）上创建它们的顺序：

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});

该children选项还可以作为传递Object。在这种情况下，它用于提供options任何/所有孩子，包括禁用它们false：

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false
    }
  }
});

${componentName}

类型： Object

可以通过组件名称的低驼峰案例变体（例如controlBarfor ControlBar）为组件提供自定义选项。这些可以嵌套在孙子关系的表示中。例如，要禁用全屏控件：

videojs('my-player', {
  controlBar: {
    fullscreenToggle: false
  }
});

技术选择

${techName}

类型： Object

Video.js回放技术（即“技术”）可以作为传递给该videojs功能的选项的一部分给予自定义选项。它们应该在技术名称的小写变体下传递（例如"flash"或"html5"）。

flash

swf
指定Video.js SWF文件在Flash技术位置的位置：

videojs('my-player', {
  flash: {
    swf: '//path/to/videojs.swf'
  }
});

但是，更改全局默认值通常更合适：

videojs.options.flash.swf = ‘//path/to/videojs.swf’
html5

nativeControlsForTouch

类型： boolean

只有技术支持Html5，此选项可以设置true为强制触摸设备的本机控件。

nativeAudioTracks

类型： boolean

可以设置为false禁用本机音轨支持。最常用于videojs-contrib-hls。

nativeTextTracks

类型： boolean

可以设置为false强制模拟文本轨道而不是本机支持。该nativeCaptions选项也存在，但只是一个别名nativeTextTracks。

nativeVideoTracks

类型： boolean

可以设置为false禁用本机视频轨道支持。最常用于videojs-contrib-hls。
.

收起

展开全文

pdf.js使用方法

万次阅读 多人点赞 2018-06-08 14:46:32

项目中显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴 pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 ...

在阅读之前跟各位小伙伴说明下, 这篇文章收费了, 真的很遗憾,虽然收费了,但这篇文章真的能够帮助您解决pdf使用问题,相信不会让你失望的 ,您可以看下阅读量,点赞人数,收藏人数

2020.8.18

项目中显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴

pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用,
呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有这样一句话 :
 Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. 
猜想如果可以改变默认72DPI就可改变呈现的清晰度

上面是最开始探索 pdf.js 使用的方法时的猜想其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定)

pdf.js使用步骤

一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )

1: 进入官网

2 : 选择稳定版下载

3: 下载至本地

4 : 解压

5:创建PDF.js文件夹并将刚解压的文件放入其中

二.将 PDF.js 文件夹放到项目服务器根目录下

小伙伴可能会有点头晕先跟着做稍后解释

1.登录项目服务器

2.登录服务器后将 PDF.js 文件夹拷贝到项目服务器的根目录

三. 使用 pdf.js 显示 pdf 文件

1.打开浏览器新建一个标签页输入你的项目服务器地址

这里我用我的服务器地址进行演示 10.0.0.5

2.当你访问项目服务器根目录(10.0.0.5) 能够看到 PDF.js 这个文件夹说明这一步已经完成了

3.在PDF.js 中依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)

4.随后会显示截图上的 pdf 文件

5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址

解释: 我这里显示的pdf文件是服务器上本来就有的测试文件请看下图

如果你的地址栏中 ? 后面 file = PDF地址可以显示 pdf 那么基本上成功了

四. 在项目中使用

 <iframe :src="http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>

开篇说一行代码就可以搞定没有骗你吧

到这里 PDF.js 的使用讲述完了

下面提供的下我的github 上的pdf.js 使用方法
点我下载PDFViewer;

使用方法都在 README.md 文件中

如果不了解gitHub的同学请往下看:

点我下载会跳到这个页面

2.点击页面上绿色按钮 clone or download

3.剩下的步骤按照 readme.md 做就可以了

创建一个交流群(QQ)

群名称：PDF.js

群号：754891076

收起

展开全文

js实现replaceAll方法

万次阅读 2018-10-21 22:07:00

js本来有replace方法，请看w3school的说明： replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。语法： stringObject.replace(regexp/substr,replacement) 第一个参数...

js本来有replace方法，请看w3school的说明：

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：
stringObject.replace(regexp/substr,replacement)

第一个参数为一个字符串或者一个正则表达式，第二个参数为一个字符串或者一个用于生成字符串的函数。

注意重点：

如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

实例：
var str = "dogdogdog";
var str2 = str.replace("dog","cat");
console.log(str2);

这里仅替换第一个dog字符串，输出为catdogdog。

js中是没有replaceAll方法的，那么如何实现替换所有匹配的字符串呢，即在js中实现replaceAll方法：
1. 使用具有全局标志g的正则表达式
var str = "dogdogdog";
var str2 = str.replace(/dog/g,"cat");
console.log(str2);

实现替换全部匹配字符串，输出结果为：catcatcat。
2. 使用另一种具有全局标志g的正则表达式
var str = "dogdogdog";
var str2 = str.replace(new RegExp("dog","gm"),"cat");
console.log(str2);

输出结果同上例。这里g表示执行全局匹配，m表示执行多次匹配。
3. 给string对象添加原型方法replaceAll()
String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}

这样就可以像使用replace方法一样使用replaceAll方法：
var str = "dogdogdog";
var str2 = str.replaceAll("dog", "cat");
console.log(str2);

输出结果同上例。
4. 使用先split，再join的方法
评论区@默默之分享的这个方法太赞了，拉到正文里以免有人不看评论，感谢@默默之分享。
var str = "dogdogdog";
var str2 = str.split("dog").join("cat")
console.log(str2);

输出结果同上例。

收起

展开全文

replaceAll

Three.js 中文文档和在线演示实例
万次阅读 多人点赞 2016-06-16 19:40:24
Three.js是当下最流行的网页3D渲染JS引擎，其主要是对WebGL编程以面向对象方式进行的封装。踏得网专注于HTML5技术生态链的资源开发，鉴于网络上Three.js方面的资料比较散乱，且良莠不齐，因此我们把Three.js的官方...
收起
webgl html5 3d 动画
JS生成uuid的四种方法
万次阅读 多人点赞 2018-08-27 16:30:44
在开发过程中，有时候需要js生成全局唯一标识符，在java中可以使用uuid，但是JS中没有现成的函数。总结了一下，JS生成唯一标识符的几种方法。第一种： function uuid() { var s = []; var hexDigits = &...
收起
uuid
如何创建一个JS文件以及调用JS文件
万次阅读 2018-09-24 22:32:43
建立一个txt文件更改后缀名为js，建立完成... 二、JAVA编辑器 1.首先在的WebContent或者任何一个资源文件夹下建立一个JS文件夹。步骤：点击WebContent，按Ctrl + N，搜索文件夹，创建一个名为js文件夹。 2.然后...
收起
js 实现纯前端将数据导出excel两种方式，亲测有效
万次阅读 多人点赞 2018-05-23 14:33:27
由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主...
收起
导出excel
js中如何将object转化为json数据，json数据转js对象
万次阅读 2018-10-10 16:38:22
js对象转json数据: JOSN.stringify(); json数据转js对象: JSON.parse();
收起
JavaScript进阶(二)在一个JS文件中引用另一个JS文件
万次阅读 2016-01-03 10:41:50
在一个JS文件中引用另一个JS文件方法一在调用文件的顶部加入下例代码： document.write(””); (注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来) 方法二通过...
收起
javascript
js中数组的4种遍历方式
万次阅读 2017-01-10 10:04:53
js的数组遍历
收起
数组遍历
JS实现图片轮播效果（自动和手动）
万次阅读 多人点赞 2018-05-30 16:45:06
底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况，所以有需要的直接下载整个工程：JS实现图片轮播效果以下为实现代码：首先是html代码：最简单的轮播效果小按钮数量无法确定，由js动态生成 < > 接...
收起
html css
成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'express'
万次阅读 2018-07-05 14:33:52
成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'express' 目录解决问题解决思路解决办法解决问题 F:\File_Solidity\nodetemplate>npm ...
收起
AR.js打造高效WebAR（three.js+AR.js）
万次阅读 多人点赞 2018-03-11 23:29:22
最近做完一个WebAR的室内导航项目，AR开发部分是基于ar.js做的。ar.js很棒的一处是结合three.js进行3D渲染。当然ar.js都是国外大牛封装开发的，我只是简单分享下向大家介绍下ar.js，并分享下ar.js开发的心得，同时也...
收起
SheetJS js-xlsx简介
万次阅读 2018-09-26 17:39:58
https://github.com/SheetJS/js-xlsx https://sheetjs.com/ 各种电子表格格式的解析器和编写器。来自官方规范，相关文档和测试文件的Pure-JS cleanroom实现。强调解析和编写健壮性，跨格式功能与统一的JS表示兼容...
收起
JS 入门教程-02-js 语句和 js 注释
万次阅读 2018-04-24 18:43:54
JS 语句分号 JavaScript 代码块 JavaScript 对大小写敏感空格 JS 注释单行注释多行注释目录导航 JS 语句如果你以前接触过 C/C++/C#/Java，对于 JS 学习起来应该会感觉很简单。这部分内容很多语言...
收起
入门教程
js的三种使用方式（行内js、内部js、外部js）
万次阅读 2017-06-11 09:35:27
1、行内js：js不单独写出 js使用方式1：行内js 2、内部js：script里的程序整个页面都可以用 js使用方式2：内部js //声明一个函数(整个文档都可以使用) function surprise() { alert('恭喜你...
收起
html script
JS识别二维码、JS生成二维码
万次阅读 2018-06-30 16:28:37
最近的项目中使用到了识别二维码和生成二维码，都是用JS生成的，应用在了移动端，在网上搜罗了许多进行验证，下面是我在项目中应用的：识别二维码 1.JS文件和测试页面压缩包：...
收起
二维码生成二维码识别二维码 H5二维码 html5二维码
Three.js编辑器editor使用详解
万次阅读 2020-08-03 15:34:14
Three.js编辑器editor使用详解官网下载Three.js压缩包其他的文件内容如下：了解过文件内容之后下一步：官网下载Three.js压缩包 github官网源码包解压后文件目录如下图：其他的文件内容如下： Build目录：包含两...
收起
js文件中引用另一个js文件
万次阅读 2017-09-22 14:17:53
方法一，在调用文件的顶部加入下例代码：document.write(”’/js/import.js’>”);方法二，在js中写如下代码：var newscript = document.createElement('script'); newscript.setAttribute('type','text/javasc
收起
pdf.js移动端展示预览打开pdf-pdfh5.js
万次阅读 热门讨论 2018-08-01 11:35:53
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery，可手势捏合缩放，支持懒加载（即分段加载）。QQ群：651601340。 github地址：https://github.com/gjTool/pdfh5 示例地址：...
收起
JavaScript 移动端插件
js引入另一个js文件两种方法
万次阅读 2019-03-24 10:29:08
js1.js引入js2.js,两个文件同目录方法一： document.write("<script type='text/javascript' src='js2.js'></script>"); 方法二： import 'js2.js';
收起
js代码中引入js文件
万次阅读 2019-06-04 15:32:02
script src='xxx.js'></script>"); 方式二： var ele= document.createElement("script"); ele.setAttribute("type", "text/javascript"); ele.setAttribute("src", "xxx.js"); docum...
收起
js 中将string转化为double，避免产生多位数和计算精度损失。
万次阅读 2015-09-23 19:53:58
整理一下，在写js代码时，我们经常会因为带有小数的运算而头痛。因为它会出现产生多位数和计算精度损失。在Java代码中我们可以有以下3种方式转化 parseFloat("123.2") parseInt("121"); parseDouble（）但是我们...
收起
javascript
JS 实现完美include
万次阅读 2017-11-19 17:28:57
转载于:...让我们想想这样1个场景，a.js 需要用到1个公用的common.js，当然你可以在用到a.js的页面使用，但假设有5个页面用到了a.js，你是不是要写5遍已有js include的一些问题
收起
js如何实现关闭当前页面
万次阅读 2018-11-01 15:38:05
js如何实现关闭当前页面 // 关闭当前页面 window.opener = null; window.open('', '_self'); window.close();
收起
关闭当前页面
js重置伪类样式；js重置affter；js重置before；js动态修改ClassName（兼容IE8及以上）
万次阅读 2018-04-08 12:02:45
js重置伪类样式；js重置affter；js重置before；js动态修改ClassName；（兼容IE8及以上） html代码： &amp;amp;lt;div id=&amp;quot;user_name&amp;quot; class=&amp;quot;...
收起
JavaScript jQuery CSS
node.js和vue.js
万次阅读 多人点赞 2018-10-25 16:22:42
什么是node.js node.js不是一门语言，不是库，不是框架，只是一个javeScript运行时环境简单的就是node.js可以解析和执行javeScript代码，以前只有浏览器可以解析执行JaveScript代码，现到的javeScript可以...
收起
js实现截图并保存图片（html转canvas、canvas转image）
万次阅读 热门讨论 2018-07-23 15:16:43
js实现截图并保存图片在本地（html转canvas、canvas转image）一、html转canvas 需要的库html2canvas.js和canvas2image.js 话不多说，直接上代码！ html &amp;amp;amp;lt;h2&amp;amp;amp...
收起
JS获取整个网页html代码
万次阅读 2018-06-11 14:26:06
JS获取整个网页html代码参考资料：JS获取整个网页html代码
收起
juqery 网页代码 html 获取

Android：你要的WebView与 JS 交互方式 都在这里了

前言

1. 交互方式总结

2. 具体分析

2.1 Android通过WebView调用 JS 代码

方式1：通过WebView的loadUrl（）

方式2：通过WebView的evaluateJavascript（）

2.1.2 方法对比

2.1.3 使用建议

2.2 JS通过WebView调用 Android 代码

2.2.1 方法分析

方式1：通过 WebView的addJavascriptInterface（）进行对象映射

特点

方式2：通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url

特点

2.2.2 三种方式的对比 & 使用场景

3. 总结

请帮顶和评论点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注carson_ho的微信公众号

videojs中文文档详解

入门使用

常用事件

常用选项

options 选项

autoplay

controls

height

loop

muted

poster

preload

src

width

Video.js特定的选项

aspectRatio

autoSetup

children

fluid

inactivityTimeout

language

languages

nativeControlsForTouch

notSupportedMessage

playbackRates

plugins

sources

techCanOverridePoster

techOrder

vtt.js

组件选项

children

${componentName}

${techName}

flash

nativeControlsForTouch

nativeAudioTracks

nativeTextTracks

nativeVideoTracks

pdf.js使用方法

pdf.js使用步骤

一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )

二.将 PDF.js 文件夹 放到 项目服务器根目录下

三. 使用 pdf.js 显示 pdf 文件

四. 在项目中使用

开篇 说一行代码就可以搞定 没有骗你吧

到这里 PDF.js 的使用讲述完了

下面提供的下 我的github 上的pdf.js 使用方法 点我下载PDFViewer;

js实现replaceAll方法

1. 使用具有全局标志g的正则表达式

2. 使用另一种具有全局标志g的正则表达式

3. 给string对象添加原型方法replaceAll()

4. 使用先split，再join的方法

Three.js 中文文档和在线演示实例

JS生成uuid的四种方法

如何创建一个JS文件以及调用JS文件

js 实现纯前端将数据导出excel两种方式，亲测有效

js中如何将object转化为json数据，json数据转js对象

JavaScript进阶(二)在一个JS文件中引用另一个JS文件

js中数组的4种遍历方式

JS实现图片轮播效果（自动和手动）

Android：你要的WebView与 JS 交互方式都在这里了

方式1：通过`WebView`的`loadUrl（）`

方式2：通过`WebView`的`evaluateJavascript（）`

方式1：通过 `WebView`的`addJavascriptInterface（）`进行对象映射

方式2：通过 `WebViewClient` 的方法`shouldOverrideUrlLoading ()`回调拦截 url

二.将 PDF.js 文件夹放到项目服务器根目录下

开篇说一行代码就可以搞定没有骗你吧

下面提供的下我的github 上的pdf.js 使用方法
点我下载PDFViewer;

js引入另一个js文件两种方法

2010年下半年信息系统项目管理师上午试卷综合知识软考真题【含答案和答案解析】