CONTEXT
I am building an app that loads a third party website within an iframe, through a proxy in order to allow changes to be made to the website. Because of the proxy, I am able to inject JS code into the website, allowing an element selector to be present within it (i.e. something like this: http://jsfiddle.net/rFc8E/)
PROBLEM
My next step is to enable the user to not only select components but to be able to edit them. So, for example, I would be able to select text, type in new text, click save, and then have the selector -> content change values be stored somewhere on my app. This has been accomplished by others, as described here: How does Optimizely & Visual Website Optimizer handle visual DOM editing?.
However, I'm not sure how step 3 is accomplished:
Our user at this point can make changes to the page, like modifying text, swapping out images, or moving elements around. Each change that is made with the editor is encoded as a line of JavaScript that looks something like the following:
$j("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER__||____________ACTION______________|
Could someone point me in the right direction?
