安卓环境 js双屏异显

在安卓环境下，实现js双屏异显需要使用Android系统提供的WebView组件。具体步骤如下：

在布局文件中添加两个WebView组件，分别代表两个屏幕。
在Activity中获取这两个WebView组件，并设置它们的相关属性，如大小、位置、可见性等。
将js代码注入到WebView中，使得WebView能够执行js代码。
在js代码中，通过调用Android提供的API，获取屏幕信息，并根据需要将内容显示在不同的屏幕上。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>双屏异显示例</title>
</head>
<body>
    <div id="screen1">屏幕1</div>
    <div id="screen2">屏幕2</div>
    <script>
        // 获取WebView对象
        var webView1 = window.android.getWebView1();
        var webView2 = window.android.getWebView2();

        // 设置WebView属性
        webView1.style.width = '50%';
        webView1.style.height = '100%';
        webView1.style.float = 'left';
        webView1.style.display = 'block';
        webView1.style.backgroundColor = '#ccc';

        webView2.style.width = '50%';
        webView2.style.height = '100%';
        webView2.style.float = 'left';
        webView2.style.display = 'block';
        webView2.style.backgroundColor = '#eee';

        // 注入js代码
        webView1.addJavascriptInterface({
            getScreenInfo: function() {
                return {
                    width: screen.width,
                    height: screen.height
                };
            }
        }, 'android');

        webView2.addJavascriptInterface({
            getScreenInfo: function() {
                return {
                    width: screen.width,
                    height: screen.height
                };
            }
        }, 'android');

        // 在js代码中获取屏幕信息并显示内容
        var screen1 = document.getElementById('screen1');
        var screen2 = document.getElementById('screen2');
        var screenInfo1 = webView1.getScreenInfo();
        var screenInfo2 = webView2.getScreenInfo();
        if (screenInfo1.width > screenInfo2.width) {
            screen1.innerText = '这是屏幕1';
            screen2.innerText = '这是屏幕2';
        } else {
            screen1.innerText = '这是屏幕2';
            screen2.innerText = '这是屏幕1';
        }
    </script>
</body>
</html>

在以上代码中，我们通过调用Android提供的getWebView1()和getWebView2()方法获取了两个WebView对象，并分别设置了它们的属性。

然后，我们通过调用WebView的addJavascriptInterface()方法向WebView中注入了一个名为android的js对象，并为其提供了一个名为getScreenInfo()的方法，用于获取屏幕信息。

最后，在js代码中，我们通过调用android.getScreenInfo()方法获取了屏幕信息，并根据屏幕宽度的大小，将内容显示在不同的屏幕上。

需要注意的是，在使用addJavascriptInterface()方法注入js对象时，需要特别小心。因为这样可能会导致安全问题，因此建议仅在必要时使用。同时，需要确保注入的js对象名和方法名在整个应用中唯一，以防止命名冲突。