13

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

4

2 回答 2

15

很高兴你问！使用 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>
于 2012-06-06T03:42:04.387 回答
3

主要飞镖：

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工作。

于 2015-07-24T06:14:14.513 回答