Web Dart - Tương tác với các thành phần JavaScript trình duyệt

Thư viện dart:js

Thư viện dart:js cung cấp các chức năng như cầu nối giữa code Dart và JavaScript của trình duyệt. Nó là cầu nối để bạn tương tác với JS. Để sử dụng nó trước tiên cần nạp thư viện này vào

import 'dart:html';
import 'dart:js';

Lúc này có một biến là context thuộc lớp JsObject nó biểu diễn đối tượng toàn cục trong JavaScript - chính là đối tượng window

Gọi hàm JavaScript

Để gọi một hàm JavaScript thông thường, sẽ sử dụng cú pháp như sau:

context.callMethod('tenhamjs', ['mảng tham số nếu có']);

Ví dụ gọi hàm JavaScript alert

context.callMethod('alert', ['Xin chào JavaScript']);
//Tương đương với alert('Xin chào JavaScript');

Lấy biến, đối tượng của JavaScript

Nếu phía JavaScript có một biến, đối tượng thì từ Dart có thể lấy một đối tượng JsObject, mà tham chiếu đến biến, đối tượng của JavaScript bằng cách:

JsObject objs = JsObject.fromBrowserObject(context['tên_đối_tượng_js']);

Có được đối tượng rồi có thể gọi các phương thức mà đối tượng đó có

JsObject objs = JsObject.fromBrowserObject('tên_đối_tượng_js');
objs.callMethod('tenhamjs', ['mảng tham số nếu có']);

Ví dụ - trong HTML có đoạn JS sau:

<script>
  var testob = {};
  testob.myfunction = function(x) {
      alert(x);
  };
</script>

Nghĩa là có đối tượng testob, có phương thức myfunction trong đối tượng đó. Vậy trong Dart tham chiếu đến tượng này và gọi hàm như sau:

dynamic testob = JsObject.fromBrowserObject(context['testob']);
testob.callMethod('myfunction', ['Hello JavaScript']);

Khởi tạo đối tượng JavaScript từ Dart

Giả tử muốn khởi tạo đối tượng từ Object

JsObject ob = JsObject(context['Object'], ['mảng_tham_số_nếu_có']);

Ví dụ bạn tích hợp thư viện jQuery vào trang, giờ từ Dart muốn chọn tất cả các phần tử p, sau đó thực hiện phương thức fadeOut để mờ dần trong 5s, sau khi hoàn thành lại gọi fadeIn để hiện thị lại

//Khởi tạo jQuery bằng cách chọn các phần tử p
JsObject jQuery = JsObject(context['jQuery'], ['p']);

//Thực hiện fadeOut và fadeIn
jQuery.callMethod('fadeOut', [5000, (){jQuery.callMethod('fadeIn');}]);