Подтвердить что ты не робот

Как динамически загружать HTML и вставлять на мою веб-страницу с помощью Dart?

Как мне динамически загружать фрагмент HTML и вставлять его на мою веб-страницу? Я использую Дарт.

Ответ 1

Рад, что вы спросили! Использование Dart для этой задачи не сильно отличается от JavaScript, за исключением того, что вы печатаете, завершаете код и выполняете гладкий процесс редактирования.

Сначала создайте snippet.html:

<p>This is the snippet</p>

Затем создайте приложение. Обратите внимание на использование XMLHttpRequest для запроса фрагмента. Кроме того, используйте new Element.html(string) для создания блока HTML из строки.

import 'dart:html';

void main() {
  var div = querySelector('#insert-here');
  HttpRequest.getString("snippet.html").then((resp) {
    div.append(new Element.html(resp));
  });
}

Наконец, здесь HTML-страница хоста:

<!DOCTYPE html>

<html>
  <head>
    <title>dynamicdiv</title>
  </head>
  <body>
    <h1>dynamicdiv</h1>
    <div id="insert-here"></div>
    <script type="application/dart" src="dynamicdiv.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Ответ 2

main.dart:

import 'dart:html';

DivElement div = querySelector('div');

main() async {
  String template = await HttpRequest.getString("template.html");
  div.setInnerHtml(template, treeSanitizer: NodeTreeSanitizer.trusted);
}

template.html:

<h1>Hello world.</h1>

Check my bird... <em>it flies</em> !
<img src="https://www.dartlang.org/logos/dart-bird.svg">

В качестве полного примера, который исходит из этого окна, см.

https://gist.github.com/kasperpeulen/536b021ac1cf397d4e6d

Обратите внимание, что вам нужно 1.12, чтобы получить NodeTreeSanitizer.trusted.