I am trying to import the contents (import the reference of the CSS and JavaScript files) of a particular html page, named "helper.html" to another html page,named "navigation.html". It works on the emulator (the reference of the CSS and JavaScript files of the "helper.html" can be imported) but NOT on the device (the device I am using is Android tablet).
My project directory looks like this:
www
-templates
- navigation.html (inside templates folder)
-helper.html (inside www)
In my "navigation.html", I have the following code snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="helper.html">
</head>
<body>
<ion-view view-title="Navigation">
<ion-content>
// SOME CODES
</ion-content>
</ion-view>
</body>
</html>
In my "helper.html", I have the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/pathFindingstyle.css" />
<!-- Some JS files to be loaded, but I am not posting them here-->
</head>
<body >
<div id="draw_area"></div>
<div id="stats"></div>
</body>
</html>
Can someone tell me a way how I could make this work on the android device? Thanks!
Old versions of Cordova for Android (<= 4.4.4) don't use Blink, the Chromium / Chrome web engine, or use an old version of Blink (< 36) that doesn't implement Web Components -including HTML Imports- for HTML rendering.
Therefore you'll need to upgrade Android to version 5+, or to use a more recent device to get a native implementation.
As a workaround, you can try to use the webcomponentsjs polyfill, with the
HTMLImports.jsfile which emulates HTML Imports (though I don't know if it will work on your Android version).