我正在尝试在单页应用程序中实现无哈希网址(例如 /somePage)。
我现在使用 here 中的 onPreventDefaultClick ，以防止 anchor 链接在单击我的 elm 代码部分时刷新页面。
问题是，我的页面上嵌入了一个 JavaScript 编辑器。并且那里还会有数量不可预测的链接(链接到应用程序上具有不同网址的不同功能)。我如何防止他们刷新页面。但也允许他们运行命令并随后更改 url。
使用像 /#/somePage 这样的哈希 URL 就很容易实现。在当前的实现中，我只是在代码的 JS/编辑器部分的 anchor 标记中添加了哈希 url，这只需更改触发我的 PageChanged Page 消息的 url 即可。为此，我使用 navigation package在榆树中。
谢谢!
最佳答案
修补编辑器以更改其生成的链接的行为。例如让编辑器添加一个 click 处理程序，通过端口将事件 URL 发送到 Elm 并返回 false (取消事件)。
下面是一个最小的示例来说明这一点:
Main.elm
port module Main exposing (..)
import Html exposing (..)
main =
program
{ init = ( "", Cmd.none )
, update = \msg _ -> (msg, Cmd.none )
, view = view
, subscriptions = \_ -> navigateTo identity
}
view m =
text <| "received: " ++ m
port navigateTo : (String -> msg) -> Sub msg
和一个index.html
<html>
<head>
<style>
html {
background: #F7F7F7;
color: red;
}
</style>
</head>
<body>
<div> <a href="/first/link" onclick="return sendToElm(this);">First Link</a></div>
<div> <a href="/second/link" onclick="return sendToElm(this);">Second Link</a></div>
<script>
var app = Elm.Main.fullscreen();
sendToElm = function (el){
app.ports.navigateTo.send(el.href);
return false;
}
</script>
</body>
</html>
关于elm - 防止代码的 javascript 部分中的 anchor 标记刷新 Elm 单页面应用程序中的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43828575/