时间戳

首页 > 解决方案 > WKWebView addEventListener 没有收到日历事件

wkwebview - WKWebView addEventListener 没有收到日历事件

问题描述

我正在尝试在 WKWebView 中使用 Calendly 并在用户创建约会时接收事件。该应用程序正在成功接收message事件，但没有出现日历事件。

这是代码：

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    
    var webView: WKWebView!
    var count = 0
    
    var html = """
    <html>
    <head>
        <meta name='viewport' content='width=device-width' />
    </head>
    
    <!-- Calendly inline widget begin -->
    
    <div class="calendly-inline-widget" data-auto-load="false">
        <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
        <script>
        Calendly.initInlineWidget({
            url: 'https://calendly.com/XXX',
            prefill: {
                name: "John Doe",
                email: "john@joe2.com",
                customAnswers: {
                    a1: "yes"
                }
            }
        });
        </script>
    </div>
    <!-- Calendly inline widget end -->
    </html>
    """

    override func viewDidLoad() {
        let config = WKWebViewConfiguration()
        let js =

        """
        function isCalendlyEvent(e) {
          return e.data.event &&
                 e.data.event.indexOf('calendly') === 0;
        };
         
        window.addEventListener(
          'message',
          function(e) {
            if (isCalendlyEvent(e)) {
              console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!");
              console.log(e.data);
            }
          }
        );
        
        function isCalendlyEvent(e) {
                  console.log('testing' + e.name);
                  return e.data.event &&
                         e.data.event.indexOf('calendly') === 0;
                };
        window.addEventListener('message', function(e){
            console.log('In listener. Event.type: ' + event.type +
                ' e.data.event: ' + e.data.event + ' event: ' + JSON.stringify(e.data));
            if (isCalendlyEvent(e)) {
                console.log('calendly event!!!!');
                window.webkit.messageHandlers.clickListener.postMessage('Calendly:' + e.data);
            } else {
                window.webkit.messageHandlers.clickListener.postMessage('Other:' + e.data);
            }
        });
        """

        let script = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: false)

        config.userContentController.addUserScript(script)
        config.userContentController.add(self, name: "clickListener")

        webView = WKWebView(frame: view.bounds, configuration: config)

        view.addSubview(webView!)
        self.webView.loadHTMLString(self.html, baseURL: nil)
    }
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        count = count + 1
        print("Msg \(count): \(message.body) ")
    }
}

标签： wkwebviewaddeventlistenercalendly

解决方案

embed_domain仅当 url 包含查询参数时才发送日历消息。在Calendly.initInlineWidgetWKWebView 内部调用时，embed_domain 查询参数设置为未定义。

要解决此问题，您可以更新 url 以包含 embed_domain 参数：

Calendly.initInlineWidget({
            url: 'https://calendly.com/XXX?embed_domain=example',
            prefill: {
                name: "John Doe",
                email: "john@joe2.com",
                customAnswers: {
                    a1: "yes"
                }
            }
        });

推荐阅读