Javascript WebView总是调用Android Web浏览器将SVG动态加载到div元素中

Javascript WebView总是调用Android Web浏览器将SVG动态加载到div元素中,javascript,android,svg,webview,Javascript,Android,Svg,Webview,我想使用javascript和HTML5将SVG图像动态加载并与之交互到Android WebView中。下面是html源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="o

我想使用javascript和HTML5将SVG图像动态加载并与之交互到Android WebView中。下面是html源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="obj_idset.js"></script>
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="map_zoom_pan_effects.js"></script>
<script type="text/javascript" src="client-menu_position.js"></script>
<script type="text/javascript" src="client-menu_routing.js"></script>
<script type="text/javascript" src="obj_positionpoint.js"></script>
<script type="text/javascript" src="obj_borderline.js"></script>
<script type="text/javascript" src="obj_borderpoint.js"></script>
<script type="text/javascript" src="obj_edge.js"></script>
<script type="text/javascript" src="obj_polygon.js"></script>
<script type="text/javascript" src="obj_stepmarker.js"></script>
<script type="text/javascript" src="obj_vertex.js"></script>
<script type="text/javascript" src="obj_category.js"></script>
<script type="text/javascript" src="obj_gpsmarker.js"></script>
<script type="text/javascript" src="menu_import.js"></script>
<script type="text/javascript" src="routing.js"></script>
<script type="text/javascript" src="affiliation_match.js"></script>
<script type="text/javascript" src="android.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="demowalk.js"></script>
<script type="text/javascript" src="convertCoordinates.js"></script>    
<script>
    $("embed").ready(function() {
        // Replaces onload () for initialization may take place only after the DOM has been built completely.
        console.log('version 24');
        //G.loadMaps(false);
        G.init();
        G.loadMaps(0);
        console.log("???");

    });
</script>

</head>    
<body>

        <div id="location"></div>
          <!-- Inside this div the map will be rendered -->
        <div id="map_container"></div>

    <!--        <div id="page-wrapper">

        <h1>Text File Reader</h1>
        <div>
            Select a text file: 
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"><pre>

    </div>
    -->

     <div id="mainmenu">
          <p>Set the position</p>
          <!-- <button onclick="menu('top');">top</button> -->
          <button onclick="Interface.position_setSVG (125,125,0);">Set postion</button>

        </div>
</body>   

</html>
与上面的html脚本一样,html网页包括一个动态加载到元素中的render SVG映射和一个Set position按钮,如桌面Chrome中所示

现在我想在Android WebView中显示相同的内容,所有java脚本文件和svg文件都放在Android Assets文件夹中。下面是主片段中的Android代码

问题是,在Android中运行时,WebView不会将svg图像加载到其元素中。它调用默认的Android Web浏览器来显示svg图像,如下图所示

如上图所示,WebView只显示Set position按钮,它调用Android web浏览器来显示SVG。因此,我无法与加载的SVG交互,因为SVG本身不包含任何javascript。javascript文件嵌入到html文件中,而不是SVG


我错过什么了吗?有谁能给我解决这个问题的办法吗

问题在于Android 4.4 KitKat。 如果上面的应用程序在4.2或更低版本上运行,则运行良好。但是如果在4.4中运行,Android将调用Android浏览器来显示嵌入的svg图像。
由于某些安全特性,KitKat不允许加载存储在内部设备中的文件。必须将文件放在外部服务器上。

在webview中加载html的代码行在哪里?那个页面是从哪里来的?@greenapps:我编辑了我的帖子,上面的代码加载了android.html文件。所有html和javascript文件都放在assest文件夹中,当应用程序启动时,它们会被复制到外部文件夹中。webview在外部存储中加载html和javascript。我认为svg将在加载html时显示。但现在我开始认为,在chrome中,用户也必须点击/按下按钮。您的帖子缺少此信息。是否由G.loadMaps在load done完成?我插入Set position按钮以检查svg是否加载到android.html中。如果在android.html中加载,则必须与设置位置按钮一起显示。但您可以看到,并没有加载svg图像,只有设置位置按钮。svg加载到Android web浏览器中。
/**
 * A placeholder fragment containing a simple view.
 */

public static class PlaceholderFragment extends Fragment {

    private SvgWebView mWebView;        
    private Button positionBtn;
    private Button destinationBtn;
    private Button routingBtn;
    private Button clearBtn;


    public PlaceholderFragment() {
    }

    @Override
    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container,
                false);         

        mWebView = new SvgWebView((WebView) rootView.findViewById(R.id.webView1));


        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.getSettings().setBuiltInZoomControls(false);

        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setSupportZoom(true);
        mWebView.getWebView().setInitialScale(0);

        mWebView.getWebView().setWebChromeClient(new WebChromeClient());

        // http://stackoverflow.com/questions/2378800/clicking-urls-opens-default-browser
        mWebView.getWebView().setWebViewClient(new WebViewClient(){
             @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return true;
                }
        });     

        CustomJavaScriptHandler js = new CustomJavaScriptHandler(getActivity());
        mWebView.getWebView().addJavascriptInterface(js, "svgapp");

        js.addInstructor(new CustomJavaScriptHandler.JSInstructor() {
            @Override
            public void jsinstruct(String s) {
                String parts[] = s.split(":");
                if (parts[0].equals("position")) {
                    //nodeSelected(Integer.valueOf(parts[1]));
                }
            }
        });

        CopyFilesAsyncTask copyTask = new CopyFilesAsyncTask();
        copyTask.execute();         

        positionBtn = (Button) rootView.findViewById(R.id.positionBtn);
        positionBtn.setOnClickListener(new OnClickListener(){
            @Override
            public void onClick(View v) {                   
                mWebView.svgPositionBySvg(100.0, 200.0, 0);
            }

        });

        destinationBtn = (Button) rootView.findViewById(R.id.destinationBtn);
        routingBtn = (Button) rootView.findViewById(R.id.routingBtn);
        clearBtn = (Button) rootView.findViewById(R.id.clearBtn);           

        return rootView;
    }

    /* the function is called after copying files from assest folder to external device */
    public void copyFinished() {
        try {
            Toast.makeText(getActivity(), "Copy done", Toast.LENGTH_LONG).show();
            String htmlPath = Utils.getSdDir(Utils.SVG_MAP_DATA_EXT_FOLDER).toURI().toURL().toString() + File.separator + Utils.ANDROID_HTML;
            // load the android.html 
            mWebView.loadUrl(htmlPath);

        } catch (MalformedURLException e) {

            Log.e(TAG, "Error ", e);
        }
    }

    class CopyFilesAsyncTask extends AsyncTask<Void, Void, Void> {

        public CopyFilesAsyncTask() {

        }

        @Override
        protected Void doInBackground(Void... arg0) {
            AssetManager assetManager = getActivity().getAssets();
            copyAssestsToExtDir(assetManager, Utils.SVG_MAP_DATA_ASSEST_FOLDER);                
            return null;
        }

        @Override
        protected void onPostExecute(Void arg0) {   
            copyFinished();
        }           

    }

    /* copy files in assest to external dir when the application start */   
    private void copyAssestsToExtDir(AssetManager assetManager, String subfolder) {

        String[] files = null;
        try {
            files = assetManager.list(subfolder);
        } catch (IOException e) {
            Log.e(TAG, "Failed to get asset file list.", e);
        }
        for(String filename : files) {
            Log.i(TAG, "File: " + filename);

            // this is file, hence copy
            InputStream instr = null;
            OutputStream outstr = null;
            try {
                instr = assetManager.open(subfolder + File.separator + filename);
                File out_dir = Utils.getSdDir(Utils.SVG_MAP_DATA_EXT_FOLDER); 
                File outFile = new File(out_dir, filename);
                outstr = new FileOutputStream(outFile);
                byte[] buffer = new byte[1024];
                int read;
                while ((read = instr.read(buffer)) != -1) {
                    outstr.write(buffer, 0, read);
                }
                outstr.flush();
                instr.close();          
                outstr.close();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }

        }
    }
}