WKScriptMessageHandler не будет прослушивать событие onclick или click для элемента кнопки на веб-странице. Веб-страница разработана с использованием Reactjs

Обратите внимание на важное (но менее известное) поведение WKWebViewConfiguration в Документы Apple,

WKWebViewConfiguration используется только при первой инициализации веб-представления. Вы не можете использовать этот класс для изменения конфигурации веб-представления после его создания.

Итак, обычно вам следует полностью настроить WKUserContentController до создания веб-представления.

// First, create custom configuration with user script
let userController = WKUserContentController()
let scalingScriptString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
let scalingScript = WKUserScript(source: scalingScriptString, injectionTime: .atDocumentStart, forMainFrameOnly: true)
userController.addUserScript(scalingScript)

let configurations = WKWebViewConfiguration()
configurations.userContentController = userController  // MUST set controller in configurations before creating webview
// Now, use that configuration to create the webview
webView = WKWebView(frame: .zero, configuration: configurations)

Так что я действительно заставил это работать. Было несколько проблем, но все они были связаны с ошибками в моем JavaScript. Однако JavaScript просто не выполнялся, а не выдавал никаких ошибок, из-за чего казалось, что это проблема iOS. Это заняло действительно много времени и много отладки через Safari.

По сути, то, что я обнаружил, вероятно, является ошибкой, которая широко распространена из-за того, что в Интернете мало документации / статей для отправки сообщений через WKMessagingScript. Все образцы показывают что-то вроде этого:

window.webkit.messageHandlers.test.postMessage(“message to post”)

Некоторые из них продолжают говорить, что вы можете отправить что угодно, даже словарь json. Они не могут сказать, что 1) вы НЕ можете передавать объект в эту функцию и 2) передача буквального словаря недопустима в JavaScript. Они также не приводят более подходящих примеров. Вы можете захотеть просто строковое сообщение, чтобы вы знали, что что-то произошло, но если вам нужно передать данные, вы получите их из элементов и, скорее всего, сделаете ошибку номер 1 в своей реализации (что и вы, и я сделали).

1) это важно. В вашем примере вы вызываете функцию. В JavaScript функции являются первоклассными гражданами, поэтому вы передаете объект. Вы также не можете, например, передать element.id, что я делал, потому что вам нужно передать элемент. Что вам нужно сделать, так это передать только значение типа фундамента.

*** Обратите внимание, что вы можете передать объект в JavaScript, такой как console.info(element);, что затрудняет отладку этой проблемы. Если бы вы закомментировали вызов WebKit, но передали свою функцию в журнал консоли, это бы сработало, подразумевая, что проблема связана с iOS, а не выделение проблемы на самом деле с передачей объекта.

2) обычно работает в консольном журнале, потому что браузеры, которые мы используем, распознают это. Достаточное количество разработчиков делают это, и даже если это неправильно, браузеры интерпретируют это. iOS тоже может когда-нибудь, но лучше не делать этого.

Это сработало бы (при условии, что в вашем коде нет других проблем):

var elements = document.getElementsByClassName('btn button_btn button_primary button_md button_block'); 
for (var i = 0 ; i < elements.length; i++) {
    var message = String(JSON.stringify(true));
    elements[i].addEventListener('click', function(){ 
        window.webkit.messageHandlers.testEvent.postMessage(message) 
    }); 
}

Теперь я не совсем уверен, будет ли отправка одной строки по-прежнему работать или это должен быть словарь, поскольку я отправлял словари, но если вам нужно отправить словарь, вы бы сделали это следующим образом:

var elements = document.getElementsByClassName('btn button_btn button_primary button_md button_block'); 
for (var i = 0 ; i < elements.length; i++) {
    var eventName = String(eventName); // if this variable is a string then you probably don't need this step
    var stringified = String(JSON.stringify(true));
    var message = {};
    message[String(eventName)] = stringified;
    elements[i].addEventListener('click', function(){ 
        window.webkit.messageHandlers.testEvent.postMessage(message) 
    }); 
}

Вместо window.webkit.messageHandlers.testEvent.postMessage({"foo": "bar"}) например. Обратите внимание, что я не проверял, что это не работает, я просто прочитал это в Интернете и спросил у знакомого JS-разработчика, и они подтвердили это, так что кто знает, что это может сработать. Думаю, безопаснее на всякий случай разорвать. В JS с использованием квадратных скобок было добавлено сокращенное обозначение, позволяющее передавать литерал, однако оно добавлено только недавно, поэтому я не думаю, что все версии iOS поддерживают его, и я бы не рекомендовал его использовать.

Однако я вижу две дополнительные проблемы с вашим кодом. Во-первых, вы используете onClick, когда вам нужно использовать click.

So onclick creates an attribute within the binded HTML tag, using a string which is linked to a function. Whereas .click binds the function itself to the property element. https://teamtreehouse.com/community/whats-the-difference-between-click-and-onclick

Если бы вы были веб-разработчиком, вы бы справились с обоими, но для iOS вы должны использовать только click.

Еще я заметил в вашем коде, что вы передаете eventName в функцию webkit window.webkit.messageHandlers.\(eventName).postMessage...... Я не совсем уверен, сработает это или нет. Я подозреваю, что это не так, потому что это не строка, это вызов функции. Хотя я вообще ничего не знаю о JavaScript (это был буквально первый JS, который я когда-либо писал), поэтому я могу ошибаться. В objc или swift вы не можете этого сделать при вызове функции. Даже если бы это сработало, я думаю, что это добавит слишком много сложности и не станет масштабируемым, если iOS WKMessagingScript был обновлен, чтобы больше этого не допускать. Я бы посоветовал использовать правильное имя. Если вы хотите инкапсулировать свой код, включите eventName.