dart2js: J.getInterceptor$x(...).get$document 不是函数
dart2js: J.getInterceptor$x(...).get$document is not a function
Dartium 中的一切工作正常，当我将 class 作为 Chrome 中的 JavaScript 编译和执行时，我得到：
Uncaught TypeError: J.getInterceptor$x(...).get$document is not a function
J.get$document$x @ main.dart:7
dart.ContentManager._getFiles[=11=] @ ContentManager.dart:117
dart.ContentManager._initFrame[=11=] @ ContentManager.dart:59
dart.ContentManager$_internal_closure0.call @ ContentManager.dart:44
dart.invokeClosure_closure0.call[=11=] @ js_helper.dart:2373
dart._IsolateContext.eval @ isolate_helper.dart:462
dart._callInIsolate @ isolate_helper.dart:54
dart.invokeClosure @ js_helper.dart:2373
(anonymous function) @ js_helper.dart:2397
通常我想为我的代码片段创建一个注释系统。
这里是main.dart
import "ContentManager.dart";
void main() {
ContentManager manager = new ContentManager.activate();
}
和ContentManager.dart：
此脚本的主要目的是通过单击 link 来加载框架，顶部 window 将从框架的文本区域获取脚本名称，执行它并在单击按钮后显示在代码高亮中。
import 'dart:html';
import 'dart:async';
import "package:prettify/prettify.dart";
void setStatus([String msg = ""]) {
querySelector("#status").text = msg;
}
class ContentManager {
static int _instanceCount = 0;
String _baseUrl;
var _frame = querySelector("#contentFrame");
Element _code = querySelector("#code");
Element _fileButtons = querySelector("#fileButtons");
Element _activeFileButton;
List<String> _files;
factory ContentManager.activate() {
if (_instanceCount > 0) {
throw "Only one Content Manager can be active at same time";
} else {
_instanceCount++;
return new ContentManager._internal();
}
}
ContentManager._internal() {
_initFrameVisibility();
List<Element> links = querySelectorAll("#contentList a");
// Replace behavior of links in navigation
links.forEach((link) {
link.addEventListener("click", (e) {
e.preventDefault();
// Load and serve frame with selected url
load(e.target.href);
});
});
window.localStorage["lastPage"] ??= (links[0] as AnchorElement).href;
load(window.localStorage["lastPage"]);
window.addEventListener("message", (message) {
if (message.data == "ready") {
_initFrame();
setStatus();
}
}, false);
querySelector("#toggleFrameButton").addEventListener("click", (_) {
toggleFrame();
});
}
void _initFrame() {
_baseUrl = _frame.src.substring(0, _frame.src.lastIndexOf("/") + 1);
_fileButtons.innerHtml = "";
_files = _getFiles();
_files.forEach((file) {
if (file.endsWith(".dart")) {
Element fileButton =
new Element.html("<button class=\"btn btn-primary\"></button>");
fileButton.text = file.substring(0, file.indexOf("."));
fileButton.addEventListener("click", _fileButtonHandler);
_fileButtons.children.add(fileButton);
}
});
_frame.contentWindow.document.querySelector("#fileList").style.display =
"none";
}
void _initFrameVisibility() {
window.localStorage["showFrame"] ??= "1";
if (window.localStorage["showFrame"] == "1") {
toggleFrame(show: true);
} else if (window.localStorage["showFrame"] == "0") {
toggleFrame(show: false);
}
}
void _fileButtonHandler(e) {
String url = _baseUrl + e.target.text + ".dart";
if (_activeFileButton != null) {
_activeFileButton.classes.remove("active");
}
_activeFileButton = e.target;
_activeFileButton.classes.add("active");
_loadCode(url);
}
Future _loadCode(String url) async {
setStatus("Loading...");
String code = await HttpRequest.getString(url);
_code.text = code;
ScriptElement script = new ScriptElement();
script.type = "application/dart";
script.src = url;
script.addEventListener("load", (e) => setStatus());
_frame.contentWindow.document.head.children.add(script);
_code.classes.remove("prettyprinted");
prettyPrint();
}
List<String> _getFiles() {
Element textarea = _frame.contentWindow.document.querySelector("#fileList");
List<String> fileList = textarea.text.split("\n");
for (int i = 0; i < fileList.length; i++) {
fileList[i] = fileList[i].trim();
}
return fileList;
}
void load(String url) {
setStatus("Loading...");
_frame.setAttribute("src", url);
window.localStorage["lastPage"] = url;
}
void toggleFrame({show}) {
Element frameContainer = querySelector("#frameContainer");
Element codeContainer = querySelector("#codeContainer");
if(frameContainer.classes.contains("hide") || show == true) {
frameContainer.classes.remove("hide");
codeContainer.classes.remove("col-md-12");
codeContainer.classes.add("col-md-8");
window.localStorage["showFrame"] = "1";
} else if (!frameContainer.classes.contains("hide") || show == false) {
frameContainer.classes.add("hide");
codeContainer.classes.remove("col-md-8");
codeContainer.classes.add("col-md-12");
window.localStorage["showFrame"] = "0";
}
}
}
当 JS 想要操作不存在的 _initFrame 或 _getFiles 时出现问题。
我是 Dart 的新手 - 请帮忙 :(((
编辑
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spis Treści</title>
<link rel="stylesheet" href="packages/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="packages/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="packages/prettify/js/prettify.css">
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
#fileButtons {
margin-bottom: 20px;
}
.hide {
display: none;
}
.btn {
outline: 0;
}
</style>
<script src="packages/prettify/js/prettify.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<h1>Spis treści mojej wiedzy o Dart <small><span id="status"></span></small></h1>
<div class="col-md-2">
<nav id="contentList">
<h4>Składnia języka (syntax)</h4>
<ol>
<li><a href="Skladnia/1/index.html">Podstawowa składnia, typy built-in</a></li>
<li><a href="Skladnia/2/index.html">Funkcje</a></li>
<li><a href="Skladnia/3/index.html">Operatory</a></li>
<li><a href="Skladnia/4/index.html">Control-flow</a></li>
<li><a href="Skladnia/5/index.html">Obsługa błędów</a></li>
<li><a href="Skladnia/6/index.html">Klasy</a></li>
<li><a href="Skladnia/7/index.html">Generics</a></li>
<li><a href="Skladnia/8/index.html">Paczki, biblioteki</a></li>
<li><a href="Skladnia/9/index.html">Programowanie asynchroniczne</a></li>
<li><a href="Skladnia/10/index.html">Typedef</a></li>
<li><a href="Skladnia/11/index.html">Metadata</a></li>
</ol>
<h4>Biblioteki wbudowane</h4>
<ol>
<li><a href="SDK/core/index.html">Core</a></li>
<li>
HTML
<ul>
<li><a href="SDK/html/dom/dom.html">Zarządzanie elementami DOM</a></li>
<li><a href="SDK/html/ajax/ajax.html">Obsługa AJAX</a></li>
<li><a href="SDK/html/events/events.html">Eventy</a></li>
<li><a href="SDK/html/websocket/websocket.html">Obsługa Websocket'ów</a></li>
<li><a href="SDK/html/EventTarget/index.html">Event Target</a></li>
</ul>
</li>
<li>
Async
<ul>
<li><a href="SDK/async/Future/future.html">Future</a></li>
</ul>
</li>
<li>
Convert
<ul>
<li><a href="SDK/convert/convert.html">Konwersja UTF8 i JSON</a></li>
</ul>
</li>
<li><a href="SDK/mirrors/mirrors.html">Mirrors</a></li>
</ol>
</nav>
</div>
<div class="col-md-10">
<div class="col-md-12">
<div class="btn-group" id="fileButtons"></div>
</div>
<div class="col-md-4" id="frameContainer">
<iframe style="width: 100%; height: 500px;" src="" id="contentFrame"></iframe>
</div>
<div class="col-md-8" id="codeContainer">
<button class="btn btn-danger btn-xs" style="margin-bottom: 10px;" id="toggleFrameButton">Toggle frame</button>
<pre id="code" class="prettyprint linenums">
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
pubspec.yaml
name: CodeSnippets
description: Code Snippets
version: 0.0.1
dependencies:
prettify: ^0.2.0
bootstrap: ^3.3.4
browser: ^0.10.0
execute.dart
import 'dart:html';
void main() {
window.top.postMessage("ready", window.location.href);
}
示例框架文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea id="fileList">
main.dart
defaultValue.dart
finalConst.dart
interpolation.dart
types.dart
stringEqualOperator.dart
creatingStrings.dart
boolean.dart
list.dart
</textarea>
<script type="application/dart" src="/Dart/execute.dart"></script>
<script src="/Dart/execute.dart.js"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
那是 cross-frame 文档访问。参见 https://github.com/dart-lang/sdk/issues/20146, also https://github.com/dart-lang/sdk/issues/24520
Dartium 中的一切工作正常，当我将 class 作为 Chrome 中的 JavaScript 编译和执行时，我得到：
Uncaught TypeError: J.getInterceptor$x(...).get$document is not a function
J.get$document$x @ main.dart:7
dart.ContentManager._getFiles[=11=] @ ContentManager.dart:117
dart.ContentManager._initFrame[=11=] @ ContentManager.dart:59
dart.ContentManager$_internal_closure0.call @ ContentManager.dart:44
dart.invokeClosure_closure0.call[=11=] @ js_helper.dart:2373
dart._IsolateContext.eval @ isolate_helper.dart:462
dart._callInIsolate @ isolate_helper.dart:54
dart.invokeClosure @ js_helper.dart:2373
(anonymous function) @ js_helper.dart:2397
通常我想为我的代码片段创建一个注释系统。
这里是main.dart
import "ContentManager.dart";
void main() {
ContentManager manager = new ContentManager.activate();
}
和ContentManager.dart： 此脚本的主要目的是通过单击 link 来加载框架，顶部 window 将从框架的文本区域获取脚本名称，执行它并在单击按钮后显示在代码高亮中。
import 'dart:html';
import 'dart:async';
import "package:prettify/prettify.dart";
void setStatus([String msg = ""]) {
querySelector("#status").text = msg;
}
class ContentManager {
static int _instanceCount = 0;
String _baseUrl;
var _frame = querySelector("#contentFrame");
Element _code = querySelector("#code");
Element _fileButtons = querySelector("#fileButtons");
Element _activeFileButton;
List<String> _files;
factory ContentManager.activate() {
if (_instanceCount > 0) {
throw "Only one Content Manager can be active at same time";
} else {
_instanceCount++;
return new ContentManager._internal();
}
}
ContentManager._internal() {
_initFrameVisibility();
List<Element> links = querySelectorAll("#contentList a");
// Replace behavior of links in navigation
links.forEach((link) {
link.addEventListener("click", (e) {
e.preventDefault();
// Load and serve frame with selected url
load(e.target.href);
});
});
window.localStorage["lastPage"] ??= (links[0] as AnchorElement).href;
load(window.localStorage["lastPage"]);
window.addEventListener("message", (message) {
if (message.data == "ready") {
_initFrame();
setStatus();
}
}, false);
querySelector("#toggleFrameButton").addEventListener("click", (_) {
toggleFrame();
});
}
void _initFrame() {
_baseUrl = _frame.src.substring(0, _frame.src.lastIndexOf("/") + 1);
_fileButtons.innerHtml = "";
_files = _getFiles();
_files.forEach((file) {
if (file.endsWith(".dart")) {
Element fileButton =
new Element.html("<button class=\"btn btn-primary\"></button>");
fileButton.text = file.substring(0, file.indexOf("."));
fileButton.addEventListener("click", _fileButtonHandler);
_fileButtons.children.add(fileButton);
}
});
_frame.contentWindow.document.querySelector("#fileList").style.display =
"none";
}
void _initFrameVisibility() {
window.localStorage["showFrame"] ??= "1";
if (window.localStorage["showFrame"] == "1") {
toggleFrame(show: true);
} else if (window.localStorage["showFrame"] == "0") {
toggleFrame(show: false);
}
}
void _fileButtonHandler(e) {
String url = _baseUrl + e.target.text + ".dart";
if (_activeFileButton != null) {
_activeFileButton.classes.remove("active");
}
_activeFileButton = e.target;
_activeFileButton.classes.add("active");
_loadCode(url);
}
Future _loadCode(String url) async {
setStatus("Loading...");
String code = await HttpRequest.getString(url);
_code.text = code;
ScriptElement script = new ScriptElement();
script.type = "application/dart";
script.src = url;
script.addEventListener("load", (e) => setStatus());
_frame.contentWindow.document.head.children.add(script);
_code.classes.remove("prettyprinted");
prettyPrint();
}
List<String> _getFiles() {
Element textarea = _frame.contentWindow.document.querySelector("#fileList");
List<String> fileList = textarea.text.split("\n");
for (int i = 0; i < fileList.length; i++) {
fileList[i] = fileList[i].trim();
}
return fileList;
}
void load(String url) {
setStatus("Loading...");
_frame.setAttribute("src", url);
window.localStorage["lastPage"] = url;
}
void toggleFrame({show}) {
Element frameContainer = querySelector("#frameContainer");
Element codeContainer = querySelector("#codeContainer");
if(frameContainer.classes.contains("hide") || show == true) {
frameContainer.classes.remove("hide");
codeContainer.classes.remove("col-md-12");
codeContainer.classes.add("col-md-8");
window.localStorage["showFrame"] = "1";
} else if (!frameContainer.classes.contains("hide") || show == false) {
frameContainer.classes.add("hide");
codeContainer.classes.remove("col-md-8");
codeContainer.classes.add("col-md-12");
window.localStorage["showFrame"] = "0";
}
}
}
当 JS 想要操作不存在的 _initFrame 或 _getFiles 时出现问题。
我是 Dart 的新手 - 请帮忙 :(((
编辑 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spis Treści</title>
<link rel="stylesheet" href="packages/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="packages/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="packages/prettify/js/prettify.css">
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
#fileButtons {
margin-bottom: 20px;
}
.hide {
display: none;
}
.btn {
outline: 0;
}
</style>
<script src="packages/prettify/js/prettify.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<h1>Spis treści mojej wiedzy o Dart <small><span id="status"></span></small></h1>
<div class="col-md-2">
<nav id="contentList">
<h4>Składnia języka (syntax)</h4>
<ol>
<li><a href="Skladnia/1/index.html">Podstawowa składnia, typy built-in</a></li>
<li><a href="Skladnia/2/index.html">Funkcje</a></li>
<li><a href="Skladnia/3/index.html">Operatory</a></li>
<li><a href="Skladnia/4/index.html">Control-flow</a></li>
<li><a href="Skladnia/5/index.html">Obsługa błędów</a></li>
<li><a href="Skladnia/6/index.html">Klasy</a></li>
<li><a href="Skladnia/7/index.html">Generics</a></li>
<li><a href="Skladnia/8/index.html">Paczki, biblioteki</a></li>
<li><a href="Skladnia/9/index.html">Programowanie asynchroniczne</a></li>
<li><a href="Skladnia/10/index.html">Typedef</a></li>
<li><a href="Skladnia/11/index.html">Metadata</a></li>
</ol>
<h4>Biblioteki wbudowane</h4>
<ol>
<li><a href="SDK/core/index.html">Core</a></li>
<li>
HTML
<ul>
<li><a href="SDK/html/dom/dom.html">Zarządzanie elementami DOM</a></li>
<li><a href="SDK/html/ajax/ajax.html">Obsługa AJAX</a></li>
<li><a href="SDK/html/events/events.html">Eventy</a></li>
<li><a href="SDK/html/websocket/websocket.html">Obsługa Websocket'ów</a></li>
<li><a href="SDK/html/EventTarget/index.html">Event Target</a></li>
</ul>
</li>
<li>
Async
<ul>
<li><a href="SDK/async/Future/future.html">Future</a></li>
</ul>
</li>
<li>
Convert
<ul>
<li><a href="SDK/convert/convert.html">Konwersja UTF8 i JSON</a></li>
</ul>
</li>
<li><a href="SDK/mirrors/mirrors.html">Mirrors</a></li>
</ol>
</nav>
</div>
<div class="col-md-10">
<div class="col-md-12">
<div class="btn-group" id="fileButtons"></div>
</div>
<div class="col-md-4" id="frameContainer">
<iframe style="width: 100%; height: 500px;" src="" id="contentFrame"></iframe>
</div>
<div class="col-md-8" id="codeContainer">
<button class="btn btn-danger btn-xs" style="margin-bottom: 10px;" id="toggleFrameButton">Toggle frame</button>
<pre id="code" class="prettyprint linenums">
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
pubspec.yaml
name: CodeSnippets
description: Code Snippets
version: 0.0.1
dependencies:
prettify: ^0.2.0
bootstrap: ^3.3.4
browser: ^0.10.0
execute.dart
import 'dart:html';
void main() {
window.top.postMessage("ready", window.location.href);
}
示例框架文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea id="fileList">
main.dart
defaultValue.dart
finalConst.dart
interpolation.dart
types.dart
stringEqualOperator.dart
creatingStrings.dart
boolean.dart
list.dart
</textarea>
<script type="application/dart" src="/Dart/execute.dart"></script>
<script src="/Dart/execute.dart.js"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
那是 cross-frame 文档访问。参见 https://github.com/dart-lang/sdk/issues/20146, also https://github.com/dart-lang/sdk/issues/24520