时间戳

首页 > 解决方案 > 来自网页的 Haskell Webviewhs getElementById

javascript - 来自网页的 Haskell Webviewhs getElementById

问题描述

对我来说，Haskell 的 GUI 仍然是最有潜力的，但是在示例中缺少一些基本信息，作为一个新手 Haskeller。假设其中一个例子：

{-
  webviewhs
  (C) 2018 David Lettier
  lettier.com
-}

{-# LANGUAGE
    OverloadedStrings
#-}

import qualified Graphics.UI.Webviewhs as WHS

main :: IO ()
main =
  WHS.createWindowAndBlock
    WHS.WindowParams
      { WHS.windowParamsTitle      = "webviewhs - How do I create a window and have it run itself?"
        -- This could be a localhost URL to your single-page application (SPA).
      , WHS.windowParamsUri        = "https://lettier.github.com"
      , WHS.windowParamsWidth      = 800
      , WHS.windowParamsHeight     = 600
      , WHS.windowParamsResizable  = True
      , WHS.windowParamsDebuggable = True
      }

这将创建一个窗口，我可以在其中加载自定义网页。假设这个网页有一个<input type="text" id="mytext">并且旁边有一个按钮。并不重要，但是<button type="submit" id="sendtohaskell">。我将如何通过按下按钮将文本字段中的信息获取到 Haskell？教程中没有这样的例子。对我来说，这是从 webapp 获取信息、在 Haskell 中处理并将其返回到例如的缺失链接。SQLite。

标签： javascriptsqlitehaskell

解决方案

如github 页面所示，您可以通过回调从 JS 接收数据，并在 Haskell 的窗口中执行任意 JS。这足以进行您可能想要的任何类型的通信，这是一个示例，它在按下按钮时执行一些 Haskell，然后在网页中显示结果：

{-# LANGUAGE OverloadedStrings, QuasiQuotes #-}
module Main where

import System.Directory(getCurrentDirectory)
import Text.Printf
import Control.Monad(void)
import Language.Javascript.JMacro
import qualified Graphics.UI.Webviewhs as WHS
import qualified Data.Text as T

windowCallback window = do
  return True

handleJSRequest window request = void . WHS.runJavaScript window $ [jmacro|
  show_response `(printf "'Got response: %s'" request :: String)`
  |]

main :: IO ()
main = void $ do
  dir <- getCurrentDirectory
  WHS.withWindowLoop
    WHS.WindowParams
      { WHS.windowParamsTitle = "Test"
      , WHS.windowParamsUri = T.pack $ printf "file://%s/example.html" dir
      , WHS.windowParamsWidth = 800
      , WHS.windowParamsHeight = 600
      , WHS.windowParamsResizable = True
      , WHS.windowParamsDebuggable = True
      }
    handleJSRequest
    windowCallback

<html>
  <head>
    <title>Example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript">
      function show_response(response) {
        document.getElementById('response').innerHTML = response;
      }
      function submit() {
        var value = document.getElementById('textbox').value;
        window.external.invoke(value)
      }
    </script>
    <input type="text" id="textbox"/>
    <input value="say hello" type="button" onclick="submit()"/>
    <p id="response"></p>
  </body>
</html>

您应该注意到，尽管 haskell webview 库只有 2 次提交，最后一次是在 7 个多月前，所以目前还没有积极开发。

推荐阅读