dart2js: J.getInterceptor$x(…).get$document is not a function

Issue

Everything in Dartium works fine, when I’m compiling and executing that class as a JavaScript in Chrome I get:

Uncaught TypeError: J.getInterceptor$x(...).get$document is not a function
J.get$document$x    @   main.dart:7
dart.ContentManager._getFiles$0 @   ContentManager.dart:117
dart.ContentManager._initFrame$0    @   ContentManager.dart:59
dart.ContentManager$_internal_closure0.call$1   @   ContentManager.dart:44
dart.invokeClosure_closure0.call$0  @   js_helper.dart:2373
dart._IsolateContext.eval$1 @   isolate_helper.dart:462
dart._callInIsolate @   isolate_helper.dart:54
dart.invokeClosure  @   js_helper.dart:2373
(anonymous function)    @   js_helper.dart:2397

Generally I want to create a note system for my code snippets.

Here is main.dart

import "ContentManager.dart";

void main() {
  ContentManager manager = new ContentManager.activate();
}

And ContentManager.dart:
Main purpose of this script is to load frame by clicking a link, top window will fetch script names from frame’s textarea, execute it and show in code highlighter after clicking a button.

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";
    }
  }
}

The problem appear when JS want to operate on non existing _initFrame or _getFiles.
I’m new in Dart – please help :(((

EDIT
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);
}

Example frame file:

<!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>

Solution

That’s a cross-frame document access. See https://github.com/dart-lang/sdk/issues/20146, also https://github.com/dart-lang/sdk/issues/24520

Answered By – Alan Knight

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *