修改网页内容的Javascript

Question

我正在使用WhatsApp Web在适用于iOS的应用程序中工作，并且正在应用程序内部对其进行重新外观。

我正在为WkWebView实现一些JS函数，例如更改宽度值，背景颜色和其他内容，但是我陷入了困境。

您可能知道也可能不知道，WhatsApp Web App有两个主要列，其中一列显示聊天记录，另一列显示所选的聊天记录。像这样：

此刻，我设法将Web应用程序加载到wkWebView上，并为chats列提供了设备宽度的100％。但是现在我需要从此列中单击“单元格”，以便将宽度值更改为Web应用程序的另一侧。

另一个问题似乎是在iPhone上，我需要在“单元格”中点击两次以使其在右列中加载聊天数据。所以问题是，有人可以帮助我解决疑惑或给我一点提示吗？

非常感谢！ M.W。

Answer 1

好吧，几天来关于JS函数的研究使我设法在Web视图中检测到触摸事件。您可以在web.whatsapp.com Java控制台中测试的句子是这样的：

function handleStart(evt) {
   evt.preventDefault();
   console.log('touchstart');
}
elements=document.getElementsByClassName('NAME');
for (var i = 0; i < elements.length; i++) {
   elements[i].addEventListener("touchstart", handleStart, false);
}

evt.preventDefault();阻止执行触摸流程，因此，如果您希望它起作用，只需注释此行即可。

使用此功能，您可以处理触摸开始，触摸结束，触摸移动等操作。

另一件事，如果要在iOS的WkWbView中执行此语句，则只需调用这样的JS函数：

jsString = @"function handleStart(evt) {evt.preventDefault();console.log('touchstart.');} \
                    elements=document.getElementsByClassName('NAME'); \
                    for (var i = 0; i < elements.length; i++) { \
                        elements[i].addEventListener('touchstart', handleStart, false); \
                    }";
[self callJS:jsString];

callJS 函数需要调用此函数：

[_wkWebView evaluateJavaScript:jsString completionHandler:^(id response, NSError *error) {
    if (error)
        NSLog(@"%@", error.description);
}];

然后在命令中“读取”左列的单元格的点击而不会与其他事件混淆，您可以使用以下单击事件来处理点击：

elements=document.getElementsByClassName('NAME');
for (var i = 0; i < elements.length; i++) {
   elements[i].addEventListener('click', 'console.log('click')', false);
}

希望有帮助！