Issue
I am trying to run my Dart app in Firefox (v22.0). Here is the app’s homepage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My 1st Dart App</title>
<link rel="stylesheet" href="assets/myapp/myapp/myapp.css">
</head>
<body>
<h2>Push the button!</h2>
<div id="sample_container_id">
<input type="button" id="someButton" value="Some Button!" />
</div>
<script type="application/dart" src="myapp.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
When I run this as-is, my app runs fine and does exactly what I want it to. But then if I strip out the first <script/> tag (<script type="application/dart" src="myapp.dart"></script>), none of the Dart code executes at runtime. For instance, I have a click handler configured on an HTML button like so:
void main() {
querySelector("#someButton").onClick.listen((e) => window.alert("Hello!"));
}
If I remove the first <script/> tag, then when I click someButton nothing happens.
(1) Why does removing the first <script/> tag “kill” the Dart code? I am using pub build to produce cross-compiled JavaScript, so why should Firefox care about my Dart source file (since FF 22.0 doesn’t support Dart natively)?
(2) Does Dart have a recommended <DOCTYPE> declaration, such as transitional, etc.?
Solution
1) Firefox doesn’t care about the Dart source file but pub build does.
If your HTML file doesn’t contain a Dart script pub build can copy the file without any processing
otherwise pub build adds JavaScript code that executes instead of the Dart script when the browser doesn’t
support Dart.
2) Your doctype is the correct HTML5 doctype and Dart works fine with it.
Answered By – Günter Zöchbauer
Answer Checked By – David Goodson (FlutterFixes Volunteer)