嵌入到 HTML 中

Created: November-22, 2018

將 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>