Fixed rotate example - Githubissues

JBarna commented 9 years ago

Previously the rotate example would overwrite the content in the tag. I fixed it by piping the read and write stream, and then attaching our data to the read stream's end event.

No9 commented 9 years ago

Hi @JBarna Thanks for the PR but I don't quite understand what it's for. The idea with that sample is that you select the head tag and replace ALL it's contents with the style tag This gives me the following which is what was intended

<html>
  <head>
    <style type="text/css"> 
      img { 
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg); 
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
    </style>
  </head>
  <body><h3>A simple example of injecting some css to rotate an image into a page before it is rendered.</h3><image src="http://i.imgur.com/fpMGL.png" /><div id="message"></div></body></html>

However if you think there is something more worthwhile demonstrating or think the comments in the example could be clearer or I am just plain wrong :) then do let me know

Thanks

JBarna commented 9 years ago

Hey @No9

If you look at the bottom of rotate.js you'll see

http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  var output =  '<html><head><script>'
      output += 'window.onload = function () {'
      output += 'document.getElementById("message").innerHTML = "The piece of javascript also inside the head tag wasn\'t touched :)";';
      output += '}</script></head><body><h3>A simple example of injecting some css to rotate an image into a page before it is rendered.</h3>'
      output += '<image src="http://i.imgur.com/fpMGL.png" /><div id="message"></div></body></html>';
  res.end(output);
}).listen(9000);

and specifically about halfway in at this line: output += 'document.getElementById("message").innerHTML = "The piece of javascript also inside the head tag wasn\'t touched :)";';

So it had seemed to me that the point of that java script code was to show that even after the proxy added the style in the header, the prexisting javascript in the head tag wasn't touched.

If I'm totally wrong and misunderstood the example then feel free to disregard this PR request.

Edit: Also to add on it did take me a while today to figure out how to keep the pre-existing content while adding my own at the end, so the edited example might help newbies a bit more. I see that you used a duplex stream in the doge.js example, but if you don't want to edit / analyze the pre-existing content then piping is the best option like in my PR.

No9 / harmon

Fixed rotate example #31