Cmd 只需转到 Elm 中的新网页

Question

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

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

我试过创建 GoTo String Msg 并在使用 Button.onClick (GoTo "newpage.html") 的按钮点击时触发它，但我不知道要为 [=17= 添加什么].我尝试了以下方法：

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

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

Answer 1

我们已经习惯了 Bootstrap 启用按钮 link 锚点样式，所以你的问题很好。

我试用了 Chrome 开发工具，并在 elm-mdl 网站上用锚点 link 包裹了一个按钮，它似乎可以根据需要重定向。

您可能还想将问题的标题更改为 - Link 从 elm-mdl 按钮到新网页 - 因为在 elm 中没有什么可以阻止 links一般

Answer 2

似乎 elm-history 的 Location.assign 实现了重定向。

会"load the resource at the provided URL, or provides an error message upon failure"。 "It does not merely change the URL in the title bar".

Answer 3

这个有效（在 .18 中），但它不是那么漂亮：

在您的项目中创建一个名为 Native/Navigation.js

的文件

var _user$project$Native_Navigation = function() {

function setLocation(n)
{
    document.location.href = n;
}

return {
    setLocation: setLocation,
};

}();

加入你的榆树-package.json:

"native-modules": true,

在您的代码中：

import Native.Navigation

和 return Native.Navigation.setLocation "/wherever" 来自您的 update 函数。

Javascript 函数的行为确实不像 Elm 回调那样，但是由于您重定向离开了页面，所以这应该不是什么大问题。我想这可以作为一个正确发布的 Elm 模块工作...

Answer 4

适合您当前情况的方法是使用端口并强制 JavaScript 为您完成。这是图书馆不可知论者。我建议这样做的原因是，如果 <a> 标签不可接受，而您想要 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 [] [] 语句正常工作的话，这并不是最好的方法。

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

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

中找到

Answer 5

你可以使用这个有点肮脏的技巧：
为 Elm 样式属性提供 javascript 的一行。使用 Html.Attributes 库中的 attribute。

您可以创建自己的助手来执行重定向：

redirectTo : String -> Attribute msg
redirectTo destinationUrl =
  attribute 
    "onclick" 
    ("window.location.href = ' ++ destinationURL ++ "'")

您可以像这样添加到任何元素：

button 
  [ class "mdl-button", redirectTo "https://google.com" ]
  [ text "Click to leave" ]

Answer 6

Package elm-lang/navigation 现在可以让你直接这样做，函数 load:

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

Cmd 只需转到 Elm 中的新网页

Cmd to simply go to a new webpage in Elm

javascript

dom

elm

elm-port