Javascript在单元格点击时修改网页内容

Question

我正在使用 WhatsApp Web 开发适用于 iOS 的应用程序，我正在应用程序内对其进行全新外观。

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

您可能知道也可能不知道，WhatsApp 网络应用程序有两个主要列，其中一个显示聊天，另一个显示选定的聊天。像这样：

此时，我已设法在 wkWebView 上加载 Web 应用程序，并为聊天列提供 100% 的设备宽度。但现在我需要点击此列中的“单元格”，以便将宽度值更改为 Web 应用程序的另一侧。

其他问题似乎是在 iPhone 上，我需要在“单元格”中点按两次才能将聊天数据加载到右栏中。所以问题是，谁能帮我解决我的疑惑或给我一点提示？

非常感谢！ 分子量

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);
}

希望对你有帮助！