Is HTML Import still supported in Google Chrome? - html

According to http://blog.teamtreehouse.com/introduction-html-imports
To enable HTML imports in Chrome, go to chrome://flags and enable the Enable HTML Imports flag. Once you’re done, click the Relaunch Now button at the bottom of the screen to restart Chrome with support for HTML imports.
But I can't find it in latest version of Google Chrome flags

HTML Imports are implemented natively in Chrome, Opera and Android.
It is still a W3C Working Draft.
For other browsers, you can use:
the webcomponentsjs polyfill,
or directly the file html-imports.min.js from HTML Imports.
Update 2019
HTML Imports won't be supported natively after Chrome 73. You should then use another solutions:
the polyfill,
an alternate module loader,
JS import combined with template literals,
a direct download with fetch().
Update 2020
HTML Imports were definitvely removed.

I found an alternate way to do the same. I put the whole file to be imported,in a string,
then call document.write(theString) .for example
//head.js
var s=
`<meta charset='UTF-8'>
<link rel="stylesheet" href="/Program/assets/css/main.css">
<script src="/Program/assets/js/my.js"></script>
<script src="/Program/libs/highlight/highlight.pack.js"></script>
<link rel='stylesheet' href='/Program/libs/highlight/androidstudio2.css'>
<script src='/Program/assets/js/jquery.3.4.1.js' ></script>
<script>
$('code').each(function() {
var that = $(this);
var html = that.html().trim();
that.empty();
that.text(html);
});
hljs.initHighlightingOnLoad();
</script>
`;
document.write(s);
then I call this newly created script file instead of the main file:
<script src="/Program/head.js"></script>

Related

How to use Panorama with Forge Viewer v6

Based on https://forge.autodesk.com/blog/iphone-panorama-forge-viewer example, I am able to use panorama on my iphone. However, when I tried to implement this extension using Forge Viewer v6, it does not work.
How do I implement this feature in v6?
Due to some changes between the versions, the process of overriding the Gamepad behavior is now a little different:
In your HTML, include a <script> tag with the FirstPerson extension, and follow it by another <script> tag with the deviceOrientationExt extension:
<head>
...
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.0"></script>
...
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/extensions/FirstPerson/FirstPerson.js?v=v6.0"></script>
<script src="https://raw.githubusercontent.com/wallabyway/deviceOrientationExt/master/docs/deviceOrientationExt.js"></script>
</head>
And in your JavaScript code, activate the first person tool after loading the FirstPerson extension:
viewer.loadExtension('Autodesk.FirstPerson').then(function() {
viewer.toolController.activateTool('firstperson');
});

How do you use a background.html page (instead of background.js) with Manifest 2 in a Chrome Extension

I have a Chrome Extension that worked great with the background specified as a script (background.js). Chrome created a virtual background.html page...
I need to a script to background (to get Google Drive integration) and so (as I understand it) need to move to background.html.
My Manifest now specifies:
"background": {
"page": "background.html"},
I added "https://apis.google.com/js/api.js" to my original setup (below) to gain Google Drive access for my Chrome Extension...but my background page was throwing "gapi is not defined" errors...so I switched to background.html to try and get my background processes to be able to access the Drive scripts.
"background": {
"scripts": ["/dscripts/jquery-3.1.1.min.js","/dscripts/firebase.js","/dscripts/bootstrap-multiselect.min.js","/dscripts/bootstrap.min.js", "https://apis.google.com/js/api.js", "/scripts/background.js"]},
My new background.html page looks like:
<!DOCTYPE html>
<html>
<head>
<!--Original javascript / CDN -->
<script type="text/javascript" src="dscripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="dscripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="dscripts/bootstrap.min.js"></script>
<script type="text/javascript" src="dscripts/bootstrap-toggle.min.js"></script>
<!-- FIREBASE - I think we only need JS, not app.js and auth.js -->
<script src="dscripts/firebase.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script> -->
<!-- Google APIS -->
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<!-- background.js -->
<script type="text/javascript" src="scripts/background.js">
</head>
</html>
I haven't made any changes to background.js - which holds chrome.runtime.onStartup.addListener and lots of well-established logic.
When I run my Extension and view the background.html console, I get:
Navigated to chrome-extension://XXXXX/background.html
Usually there would be a ton of debug console content generated by my background.js file. It's as if the background.js doesn't run.
Which makes sense, I guess - there's no dom to load and trigger actions.
I feel like I'm missing something really obvious (apologies) - but all the examples I could find use background.js, not background.html.
How do I get my javascript to fire when specifying background.html?
Was missing closing tag on the background.js file. Once I added that then the js in background ran exactly as expected.
So there is no extra action (for those coming after) required to use your own background.html page vs. the auto-generated one.

Ionic Framework - HTML rel import works on emulator but NOT on device

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.js file which emulates HTML Imports (though I don't know if it will work on your Android version).

my Polymer website does not work on firefox

The page is at http://5heurescod.tk. Please inspect the source to see what I could have done wrong.
It works well on Chrome but not on firefox.. Did I forget to import something?
(edit: when I say it doesn't work, I mean that the menu on the left is not clickable and the javascript function getCard(); which should be called at start is not called.)
I used
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
Any idea? Thanks!
At a glance, I'd say:
make sure the web components polyfill (webcomponents.js, formerly platform.js) is loaded first, certainly before any HTML imports, since this includes the polyfill for HTML imports.
wait for the polymer-ready event before manipulating any of the DOM or setting CoreStyle properties. You might be able to get away with this on Chrome, because native HTML imports work a little differently -- but definitely not on Firefox or any browser without native HTML imports.
See: https://www.polymer-project.org/0.5/docs/polymer/polymer.html#polymer-ready
In my case I had all the imports in an elements.html (including the webcomponents.js). I moved the script tag from the elements.html to index.html and it worked. I put the script tag right before importing the elements.html. The resulting index.html was:
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="elements.html">
<link rel="stylesheet" href="css/core_toolbar.css">
</head>
html imports are not supported by Firefox, visit https://www.polymer-project.org/0.5/resources/compatibility.html
And platform.js i no longer used, now you should include firstly webcomponents.js, visit https://www.polymer-project.org/0.5/docs/start/platform.html
I had same problem with Firefox,
I recommend you to use the polyfill webcomponents-lite.js rather webcomponents.js which has some issue with smartdevices.
As it is said in https://www.polymer-project.org/1.0/docs/browsers
We recommend using the webcomponents-lite.js version of the polyfills
with Polymer 1.0+. This version is designed to be used with Shady DOM,
and does not contain the full Shadow DOM polyfill.
Although the full webcomponents.js polyfill works with Polymer 1.0+,
we do not recommend using it. This version contains the full Shadow
DOM polyfill, which is known to have high performance overhead.
You need also to pay attention for the tag link which does not work inside your webcomponent, in that case just move it to the page which hostes the webcomponent.
For me, it was the fact that I was loading webcomponents-lite.min.js, instead of the full version, webcomponents.min.js.
Its all about browser support for web components.
Where browser's native support is not available for web components, then this pollyfills under "bower_components/webcomponentsjs/" Either of "webcomponents.js" or "webcomponents-lite.js" is needed.
See: https://www.polymer-project.org/1.0/docs/browsers

Is it necessary to compile Dart for Chrome

I noticed something by accident. When I create a simple AngularDart application, it runs just fine in Chrome and Firefox (not just Dartium). I understood that this would take an extra step to compile but LO! it runs, as is, in Firefox and Chrome. What gives?
main.dart
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
void main() {
applicationFactory().run();
}
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
DartEditor runs pub serve in the background which serves files to the browser.
When a browser can't process Dart a JavaScript routine is executed which requests the JavaScript source and pub serve transpiles (compiles) on the fly to JavaScript and serves this generated JavaScript to the browser.
So, yes, you need to compile to browsers which don't have native Dart support.
pub build (when run from the CLI runs in release mode by default) in addition to generating JavaScript from Dart also does tree-shaking to remove unused code and minification to make the result JavaScript smaller.
pub serve doesn't do this.