嵌入到 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>