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

Posted 2023-03-14

【中文标题】Javascript在单元格点击时修改网页内容

【英文标题】：Javascript to modify web content on cell click

【发布时间】：2018-12-04 15:49:11

【问题描述】：

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

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

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

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

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

非常感谢！ 分子量

【问题讨论】：

我们能看到你现在的代码吗？

请注意：cultofmac.com/314343/…

该代码可以在javascript控制台中执行，在应用程序中只有一个JS Caller，当web视图被加载时，没有什么有趣的展示。

该应用不是whatsapp+这样的第三方api，该应用只是在移动应用中使用web.whatsapp.com接口。没有什么不合法的。仅显示带有 WhatsApp 网页内容的自定义网页视图。

有什么解决办法吗？ @wazowski

【参考方案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);

希望对你有帮助！

【讨论】：

whatsapp @wazowski 的“名称”是什么？

NAME 是您要使用的类的名称。来自网站的 div 上的类似内容：<div class="_1jjYO">This is a div in a web</div> 在这种情况下，'NAME' 是 '_1jiYO'。