Dart 链接
最后修改于 2025 年 4 月 4 日
Dart 中的 Link 类提供了一种处理链接和 URI 的方法。它是 dart:html 库的一部分，用于 Web 应用程序。
Link 表示 DOM 中的 HTML 锚点元素 (<a>)。它允许以编程方式操作链接属性和导航行为。
基本定义
Link 是一个表示超链接的 DOM 元素。它继承自 Element 类，并提供特定于链接的属性。
主要功能包括 href 操作、target 控制和点击处理。它对于 Dart 应用程序中的动态 Web 导航至关重要。
创建基本链接
此示例展示了如何创建简单的链接并将其添加到网页。
main.dart
import 'dart:html';
void main() {
var link = LinkElement()
..href = 'https://dart.ac.cn'
..text = 'Visit Dart Website'
..target = '_blank';
document.body?.children.add(link);
}
我们创建一个 LinkElement，设置其 href、文本内容和 target 属性。由于 target 设置为 '_blank'，链接在点击时会在新标签页中打开。
修改现有链接
此示例演示了如何修改现有链接的属性。
main.dart
import 'dart:html';
void main() {
var link = querySelector('#myLink') as LinkElement;
link.href = 'https://pub.dev';
link.text = 'Dart Packages';
link.style.color = 'blue';
link.onClick.listen((e) {
e.preventDefault();
window.alert('Navigation prevented!');
});
}
我们通过 ID 选择一个现有链接并修改其属性。我们还添加了一个点击事件监听器，该监听器会阻止默认导航并显示一个警告框。
动态创建多个链接
此示例展示了如何从 URL 列表中创建多个链接。
main.dart
import 'dart:html';
void main() {
var sites = {
'Dart': 'https://dart.ac.cn',
'Flutter': 'https://flutterdart.cn',
'Pub': 'https://pub.dev'
};
var container = DivElement();
sites.forEach((name, url) {
var link = LinkElement()
..href = url
..text = name
..style.margin = '10px';
container.children.add(link);
container.children.add(BRElement());
});
document.body?.children.add(container);
}
我们从网站名称和 URL 的映射创建链接。每个链接都进行了样式设置，并添加到一个容器 div 中，中间有换行符以便更好地间隔。
链接点击跟踪
此示例演示了如何跟踪链接点击以进行分析。
main.dart
import 'dart:html';
void main() {
var links = document.querySelectorAll('a');
links.forEach((link) {
link.onClick.listen((event) {
var target = event.target as LinkElement;
print('Clicked: ${target.href}');
// Send analytics data
window.console.log('Tracking click: ${target.href}');
});
});
}
我们将点击处理程序附加到页面上的所有链接。点击链接时，链接的 href 会被记录到控制台，模拟分析跟踪。
创建下载链接
此示例展示了如何创建触发文件下载的链接。
main.dart
import 'dart:html';
void main() {
var downloadLink = LinkElement()
..href = 'data:text/plain;charset=utf-8,Hello%20World'
..text = 'Download Text File'
..download = 'example.txt';
document.body?.children.add(downloadLink);
}
我们创建一个以数据 URI 作为 href 的链接，并设置 download 属性。这会强制浏览器将内容作为文件下载，而不是导航。
最佳实践
- 安全：验证 href 值以防止 XSS 攻击
- 可访问性：提供有意义的链接文本
- 性能：对大量链接使用事件委托
- SEO：确保重要链接可被爬取
来源
本教程介绍了 Dart 的 Link 类，并通过实际示例展示了链接的创建、修改、事件处理和特殊用法。
作者
列出 所有 Dart 教程。