Matching the same elements in javascript

Question

Important I'm not trying to scam/phish or in any way harm anyone. I'm creating a magnifier for websites to use much like you would use a magnifier on a piece of paper.

Problem

I'll set the scenario.

I've essentially duplicated an entire webpage's HTML, then laid the duplication over the original page. Like so:

Position example

When I click an element on the duplicated HTML, i'd like the click event to be passed on to the original page.

This was how I was approaching the problem:

duplicate_element.onmousedown = function(event) {
        var range = document.createRange();
        var test = range.setStart(event.target, 0); 
       // Then I hoped to use:
       range.startContainer

       // to search for the clicked element on the original content
       document.find(range.startContainer)
}

So i'm stumped on how to find the matching element from the clicked target in the original HTML.

There are a few rules to the puzzle:

I can't use a library
But, I do have access to jQuery's sizzle
Pointer Events - I want to be able to interact with the duplicated HTML, but actually affect the original HTML. I think Pointer events makes the duplicated version untouchable

Any help would be great. I'll answer any questions you need. Thanks :)

Updated my question to alleviate any concerns about security — outrunthewolf, Apr 30 '14 at 14:32
because you stating that it isn't a scam clearly means it isn't, haha! anyway. Best thing would likely to be to store a reference to the original element on the duplicate element. Note however that you will likely have major issues when you come across a javascript-heavy website. — Kevin B, Apr 30 '14 at 14:36
Fair enough, but people still took time to figure out nuclear physics event if its applications could be used for malice... — outrunthewolf, Apr 30 '14 at 14:39
Pointer events solves half the problem. But I want to be able to interact with the duplicated HTML, but actually affect the original HTML. Pointer events makes the duplicated version untouchable — outrunthewolf, Apr 30 '14 at 14:42
People who need to magnify text/images can do so themselves using native browser controls. — Populus, Apr 30 '14 at 14:49
Im with @Populus . People can zoom-in/out easily in a website. So a plugin would only provide unnecessary weight to a site. Anyway if you want to magnify stuff the best approach would be to set all font-size bigger. You might find this helpful http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level — Jo E., Apr 30 '14 at 15:02
I also agree with @Populus... But i'd also like to keep my job :D and if my boss wants a magnifier, thats what I have to do — outrunthewolf, Apr 30 '14 at 15:14

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Depending on how the duplicated HTML is laid over the original one, you could compute the path from the root of the duplicate document, and re-apply it on the duplicated document, then trigger the event.

But for that you need a way to compute the path to apply from the computed path. For example, if the document is structured in a way similar to:

<body>
  <div> <!-- root of the orginal HTML -->
     ...
  </div>

  <div> <!-- duplicated root -->
     ...
  </div>
</body>

Then you can compute the XPath (or some other kind of path such as the list of children indexes as exposed in this question) from the duplicated div, and re-apply it from the original div:

duplicated_element.onmousedown = function(event) {
    var path = getPath(duplicatedDiv, event.target);
    var element = findNode(originalDiv, path);
    element.onmousedown(event);
}

Of course it works only if the original HTML has a root within the body. If not, you can encapsulate the duplicated HTML in such a root and compute the path from that root, and apply it from the root of the document to find the matching node:

duplicated_element.onmousedown = function(event) {
    var path = getPath(duplicateRoot, event.target);
    var element = findNode(document, path);
    element.onmousedown(event);
}

It doesn't give you a complete answer and may need to be adapted to the way you generate the page, but hopefully gives a useful help on how to proceed.

Thank you very much. I won't post my final solution as people seem to think its a security risk. But, you put me on the correct track and with some slight tweaks it worked perfectly. Many Thanks!! — outrunthewolf, May 02 '14 at 08:42

Matching the same elements in javascript

1 Answers1