嵌入到 HTML 中

將 Elm 程式碼插入現有 HTML 頁面有三種可能性。

嵌入身體標籤

假設你已將 Hello World 示例編譯為 elm.js 檔案,你可以讓 Elm 接管 <body> 標記,如下所示:

<!DOCTYPE html>
<html>
    <body>
        <script src="elm.js"></script>
        <script>
          Elm.Main.fullscreen()
        </script>
    </body>
</html>

警告 :有時某些鍍 Chrome 擴充套件會混亂使用 <body>,這會導致你的應用在生產中中斷。建議始終嵌入特定的 div 中。更多資訊在這裡

嵌入 Div(或其他 DOM 節點)

或者,通過提供具體的 HTML 元素,可以在該特定頁面元素中執行 Elm 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='app'></div>
        <script src="elm.js"></script>
        <script>
            Elm.Main.embed(document.getElementById('app'))
        </script>
    </body>
</html>

嵌入 Web 工作者(無 UI)

榆樹程式碼也可以作為工作者啟動並通過埠進行通訊 :

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Worker</title>
    </head>
    <body>
        <script src="elm.js"></script>
        <script>
            var app = Elm.Main.worker();
            app.ports.fromElmToJS.subscribe(function(world) {
                console.log(world)
            });
            app.ports.fromJSToElm.send('hello');
        </script>
    </body>
</html>