Develop Reference

Javascript to modify web content on cell click

I am working in an app for iOS with WhatsApp Web, and I am giving a new look to it inside the app.
I am implementing some JS functions to a WkWebView such change width values, background colors and other stuff, but I am stuck in a point.
As you may or may not know, the WhatsApp Web App, has two main columns, one of them shows the chats, and the other one shows the selected chat. Like this:
At this moment, I have managed to load the web app on a wkWebView and give the chats column the 100% of the device width. But now I need to catch the click on "cell" from this column in order to change the width value to the other side of the web app.
Other problem seems to be that on an iPhone I need to tap twice in the "cell" to make it load the chat data in the right column. So the question is, can anyone help me to solve my doubts or give me a little hint with it?
Thanks a lot!
M.W.

Well, some days of research about JS functions I have managed to detect the touches events in the web view. The sentence you can test in the web.whatsapp.com java console is like this:
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);
}
The evt.preventDefault(); prevents the execution of the flow of the touch, so if you want it to work, just comment this line.
With this functions you can handle touch start, touch end, touch move, and some more...
Other thing, if you want to execute this sentence in a WkWbView on iOS, you just need to call a JS function like this:
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];
And the callJS function will need to call this:
[_wkWebView evaluateJavaScript:jsString completionHandler:^(id response, NSError *error) {
if (error)
NSLog(#"%#", error.description);
}];
And in ordet to 'read' the click on the cell of the left column with out mess with the other events, you can handle the tap with click event like this:
elements=document.getElementsByClassName('NAME');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', 'console.log('click')', false);
}
Hope it helps!

How to get all images on website, even if they are not currently displayed using javascript

I know how to get all images from a website using javascript, e.g.:
var images = document.getElementsByTagName('img');
var srcList = [];
for(var i = 0; i < images.length; i++) {
srcList.push(images[i].src);
}
However, when using a website like web.whatsapp.com this function will only provide images from the chat that is currently active. I wonder if it is possible to get the images from the other chats as well (assuming that they are already loaded), even if they are not the active chat displayed at the moment. Or alternativeley, if there is a way to make a certain chat as active using javascript.

javascript unable to find all a-tags on squarespace site

What could be the reason why the javascript function "languify" in the bottom of this page is not able to look up all the links in the topNav?
http://www.yggdrasildance.dk/
I'm writing all the links from the topNav to the console, but some are missing (for example 'about' and 'galleries').
I see that Squarespace has som additional javascript after my own. But even if I manually run the "languify" function once the page is completely loaded, the 'about' link remains unseen by the script.
Here's the relevant code:
var a_items = document.getElementById('topNav').getElementsByTagName('a');
for (var i = 0; i < a_items.length; i++)
{
console.log('inspecting link to: ' + a_items[i].getAttribute('href'));
}

Chrome Console Automatic Click

I'm on a website that forces me to click numerous elements on the page
This is the code for the elements
<span class="icon icon-arrow-2"></span>
Is it possible to tell me the code to write into the console of google chrome to click all the elements on the page named "icon icon-arrow-2" at once?

var items = document.getElementsByClassName('icon icon-arrow-2');
for (var i = 0; i < items.length; i++) {
items[i].click();
}
Or if there is jQuery on the page:
$('.icon.icon-arrow-2').click();

Enabling and Disabling hyperlinks in JavaScript

I'm working on a project where I need to temporarily disable all hyperlinks, and then enable them again once my pop-up div is gone. I am able to successfully disable all the links using this function I wrote:
function disableHyperlinks(){
link_targets = Array();
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
link_targets.push(anchors[i].href);
anchors[i].href= "#";
}
}
Which also saves all the URLs so it can put them back later using this function:
function enableHyperlinks(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
anchors[i].href= link_targets[i];
}
}
The above code seems to work just fine, it removes all the links, and then puts them all back without any issues, however the problem is that if I run the 'enable' code after a link is clicked, its almost as if the javascript is setting the link back to the original destination and then registering the click. So despite being 'disabled' in this fashion, the link still ends up leaving the page.
The problem is demonstrated here
Click the red "L" with the white background to enable the javascript I made for selection, you'll notice anything you bring your mouse over will get a blue dashed border, I need to be able to "select" parts of the web page without redirecting to another page if a link is also clicked.. any idea how I could go about doing this properly?
(Please note I am trying to avoid JQuery)

Work on the onClick listener:
var areEnabled = false;
function toggleLinks(){
var anchors = document.getElementsByTagName('a');
for(var i=0; i < anchors.length; i++)
anchors[i].onclick = (areEnabled) ? null : function(e){ return false };
areEnabled = !areEnabled;
};

Instead of searching for many links and disabling them (which, BTW, won't help you against other clickable objects), you can create another invisible div, just below your popup on z-index that would cover entire page and catch all clicks instead of elements underneath. You can even make it semi-transparent instead of completely invisible for visual effect alerting user that "lower-level" is disabled.

I was finally able to solve my own problem by manipulating the onclick property of each hyperlink, then setting it back to what it was previously. The only problem with bokonic's response was that the onclick property was set to null to "re-enable" the link, which would then disable any javascript functionality the link had previously.
var onclickEvents;
function disableHyperlinks(){
onclickEvents = Array();
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
onclickEvents.push(anchors[i].onclick);
anchors[i].onclick=function(){return false;};
}
}
function enableHyperlinks(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
anchors[i].onclick = onclickEvents[i];
}
}