javascript - Cmd 只需转到 Elm 中的新网页

Question

有没有一种方法可以在 Elm 中简单地转到一个新网页，类似于单击链接？

我有一个按钮，单击该按钮后我想将用户带到另一个网页。我知道我可以将其设为 a 元素并使用 CSS 将其设置为按钮样式。但是，我正在使用 elm-mdl 创建 Material Design 精简版按钮，无论如何我都想知道如何做到这一点。

我已经尝试创建一个 GoTo String Msg 并在点击按钮时使用 Button.onClick (GoTo "newpage.html")，但我不知道要为 Cmd 输入什么。我尝试了以下方法:

GoTo url ->
  ( model, Navigation.newUrl url )

但这只会使地址栏中的 URL 发生变化，用户实际上并没有转到新的 url...我可以使用一个端口并编写一些简单的 JavaScript 代码来调用 window.location.href = 'newpage.html'，我只是希望有一个简单的标准 Elm 方法可以做到这一点。

Answer 1

适合您当前情况的方法是使用端口并强制 JavaScript 为您完成。这是图书馆不可知论者。我想建议这样做的原因是，如果 <a>标签 Not Acceptable ，您需要 Cmd msg ，那么这将为您提供准确的信息。

我将包含一个基本示例，它应该很容易与您正在做的事情相关联。

您应该创建一个接受端口的模块，或者通过创建一个模块并添加 port 来转换您当前的端口之一以使用它们到模块声明的开头。您也可以只修改现有模块以同样的方式执行此操作。

一个示例模块是

port module OpenWindow exposing (openWindow)

port openWindow : String -> Cmd msg

现在您的代码中有了端口声明。您可以通过将其包装在函数中来在需要的地方使用它，或者您可以简单地调用 openWindow当您从模块 OpenWindow 导入它时，来自您的更新功能。

接下来您应该添加端口 JavaScript 代码。

在你的index.js或者你的 <script>标记你定义通常的地方

var Elm = require('../Main');
var node = document.getElementById('main');
var app = Elm.Main.embed(node);

或者不管你怎么做，只需添加

app.ports.openWindow.subscribe(function(newSite) {
    window.open(newSite);
});

您只需通过如下代码将其添加到您的原始示例中

GoTo url ->
  ( model, openWindow "newpage.html" )

就我个人而言，我不建议经常这样做，因为如果通常是 a [] []，这并不是最好的方法。语句会起作用。

您可以更恰本地向您的按钮添加 anchor 标记并以这种方式引用它。

注意:有关 window.open() 函数的更多信息可以在 here 中找到.