Cmd只需轉到Elm中的新網頁

有沒有辦法簡單地轉到Elm中的新網頁，類似於點擊鏈接？Cmd只需轉到Elm中的新網頁

我有一個button，單擊時我想將用戶帶到另一個網頁。我知道我可以製作一個a元素，並使用CSS將其設置爲一個按鈕。不過，我使用elm-mdl來創建材質設計精簡按鈕，我想知道如何執行此操作。

我試着創建一個GoTo StringMsg並點擊按鈕點擊Button.onClick (GoTo "newpage.html")，但我不知道該爲Cmd放什麼。我試過如下：

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

但這隻會增強在地址欄更改URL，用戶實際上並沒有去新的網址...我可以使用一個端口，寫一些簡單的JavaScript代碼請致電window.location.href = 'newpage.html'，我只是希望有一個簡單的標準榆樹方式來做到這一點。

來源

2016-12-02 at.

什麼適用於你目前的情況將是使用端口和強制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")

就我個人而言，我不會推薦nd經常這樣做，因爲這通常不是最好的方式，通常a [] []聲明會起作用。

你可能更合適的可能添加一個錨標記到你的按鈕並引用它的方式。

注意：關於window.open（）函數的其他信息可以在here找到。

來源

2017-01-06 17:40:13 neldridg

謝謝！這工作並且相對無痛。 – zoul

我們這樣用於引導使錨的按鈕鏈接樣式，所以你的問題是一個好。

我與鉻devtools發揮各地，並纏繞在榆樹MDL網站與錨鏈接一個按鈕，它似乎重定向你想要的。

您也可能希望將問題的標題更改爲類似 - 從榆樹MDL按鈕鏈接到新的網頁 - 因爲其中沒有停止在榆樹鏈接一般

來源

2016-12-02 17:54:33

謝謝您的意見。我會修改主題。雖然我真的很想知道如何從Elm的'Cmd'中進入一個新頁面。 'button'就是我目前的用例，它讓我很好奇如何實現這個功能，而不必創建一個端口。在按鈕周圍環繞'a'標籤是一個很好的解決方法。實際上，我只是把'button'放在一個'form'中，用'method =「get」'和'action =「page.html」'，但是我在URL中得到了一個醜陋的'''字符。 –

好像elm-history的Location.assign實現重定向。

它將「在所提供的URL加載資源，或在故障時提供錯誤消息」。「它不僅僅改變標題欄中的URL」。

來源

2016-12-05 01:42:01

謝謝Marcelo，這似乎是一個支持我所尋找的軟件包。雖然不支持榆樹0.18。 –

這工作（以0.18），但它不是那麼漂亮：

請在您的項目中的文件名爲原生/ Navigation.js

var _user$project$Native_Navigation = function() { 

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

return { 
    setLocation: setLocation, 
}; 

}();

添加到您的榆樹包以.json：

"native-modules": true,

在您的代碼：

import Native.Navigation

並從update函數返回Native.Navigation.setLocation "/wherever"。

JavaScript函數確實沒有表現爲榆樹回調應該，但既然你不應該是太大的問題的重定向頁面了。我想這可以作爲一個正確發佈的Elm模塊...

來源

2016-12-23 22:36:35 Harmen

有這種有點骯髒的黑客你可以使用：
提供一個JavaScript的單線內容到Elm風格屬性。使用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" ]

來源

2017-01-06 18:13:52 wintvelt

包elm-lang/navigation可以讓你做到這一點直接在這天，功能load：

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

來源

2018-01-10 17:30:17 robx

Cmd只需轉到Elm中的新網頁

回答

相關問題