如何使用 Dart 动态加载 HTML 并插入到我的网页中

如何动态加载HTML片段并将其插入我的网页？我正在使用飞镖。

很高兴你问！使用 Dart 完成此任务与 JavaScript 没有太大区别，除了您可以获得键入、代码完成和流畅的编辑体验。

首先，创建代码段.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>

main.dart：

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

模板.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工作。

你可以试试这个例子。

https://jsfiddle.net/kofwe39d/（JS从Dart源代码编译。

web/main.dart

import 'dart:async';
import 'dart:html';
import 'package:virtual_dom/components/component.dart';
import 'package:virtual_dom/features/state.dart';
import 'package:virtual_dom/helpers/h.dart';
import 'package:virtual_dom/helpers/mount.dart';
import 'package:virtual_dom/helpers/styles.dart';
import 'package:virtual_dom/helpers/vhtml.dart';
void main() {
  final app = document.getElementById('app')!;
  mount(app, _App());
}
class _App extends Component {
  @override
  Object render() {
    final timer = State.get('timer', () => 3);
    final setTimer = State.set<int>('timer');
    if (timer > 0) {
      Timer(Duration(seconds: 1), () {
        setTimer(timer - 1);
      });
    }
    final html = timer > 0
        ? ''
        : '''
Hello, <strong>World!</strong>
''';
    final style = styles({'padding': '6px'});
    return h('div', {
      'style': style
    }, [
      if (timer > 0) '$timer sec',
      h('p', 'Your html:'),
      vHtml('div', html),
    ]);
  }
}

web/index.html

<!DOCTYPE html>
<html style="height: 100%;">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example application</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  <script defer src="main.dart.js"></script>
</head>
<body style="height: 100%; font-family: Verdana,sans-serif; font-size:15px; line-height:1.5">
  <div id="app" style="height: 100%;"></div>
</body>
</html>

相关内容

最新更新

热门标签：