13

HTML のスニペットを動的に読み込み、Web ページに挿入するにはどうすればよいですか? ダートを使用しています。

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

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。

于 2015-07-24T06:14:14.513 に答える