Kotlin WASM：如何为按钮添加链接？

Kotlin WASM运行在浏览器环境下，不需要Android的Intent机制，直接调用浏览器原生API就能实现跳转，下面是几种实用方案：

1. 原生DOM按钮绑定点击事件跳转 #

直接给按钮添加点击事件，调用window对象的导航方法：

import kotlinx.browser.document
import kotlinx.browser.window
import org.w3c.dom.HTMLButtonElement

fun setupLinkButton() {
    val button = document.createElement("button") as HTMLButtonElement
    button.textContent = "打开新页面"
    button.onclick = {
        // 打开新标签页跳转
        window.open("https://你的目标链接.com", "_blank")
        // 如果要在当前页面跳转，替换成下面这句
        // window.location.href = "https://你的目标链接.com"
    }
    document.body?.appendChild(button)
}

2. 用<a>标签模拟按钮样式 #

这种方式视觉上是按钮，本质是原生链接，支持右键新标签打开等浏览器默认行为：

import kotlinx.browser.document

fun createButtonStyleLink() {
    val link = document.createElement("a")
    link.href = "https://你的目标链接.com"
    link.target = "_blank"
    // 给链接添加按钮样式
    link.style.apply {
        display = "inline-block"
        padding = "8px 16px"
        backgroundColor = "#007bff"
        color = "white"
        textDecoration = "none"
        borderRadius = "4px"
        border = "none"
        cursor = "pointer"
    }
    link.textContent = "按钮样式链接"
    document.body?.appendChild(link)
}

3. Compose for Web中的实现方式 #

如果用Compose for Web构建UI，有两种常用写法：

import androidx.compose.runtime.Composable
import androidx.compose.web.attributes.target
import androidx.compose.web.dom.Button
import androidx.compose.web.dom.A
import androidx.compose.web.dom.Text
import org.jetbrains.compose.web.css.padding
import org.jetbrains.compose.web.css.backgroundColor
import org.jetbrains.compose.web.css.color
import org.jetbrains.compose.web.css.borderRadius
import org.jetbrains.compose.web.css.textDecoration
import org.jetbrains.compose.web.css.display
import kotlinx.browser.window

@Composable
fun LinkButton() {
    // 写法1：按钮点击触发跳转
    Button(
        onClick = {
            window.open("https://你的目标链接.com", "_blank")
        }
    ) {
        Text("点击跳转")
    }

    // 写法2：A标签模拟按钮
    A(
        href = "https://你的目标链接.com",
        attrs = { target("_blank") }
    ) {
        style {
            padding(8.px, 16.px)
            backgroundColor("#007bff")
            color("white")
            borderRadius(4.px)
            textDecoration("none")
            display("inline-block")
        }
        Text("按钮式链接")
    }
}

内容的提问来源于stack exchange，提问作者Aris Guimerá