Load External Site And Change Its Visualization

I'm trying to create a web page able to change a site visualization (.css or / and .js) in order to recreate the same live change capability offred by Firebug for Firefox or the In

Solution 1:

No. Your solutions may be

• to let your own site act as proxy so the same origin policy isn't triggered
• to build an extension, which will be browser dependent (Firefox or Chrome) and which will require authorization and installation

Solution 2:

I'm not sure if I understand what you want very well, but my feeling to ''trick'' this easier would probably to give very specific height and width to your first site (the iframe) and do a jQuery condition

If ($('body').width() == 500 && $('body').height() == 400 {
      $('body').addClass('isiFrame');
    }

Then, you only have to do your css .isiFrame .myCoolDivs {....} You might have to use it on a document ready also, but that could be one way to trick it and since you're not doing it on resize (exepect if somebody's having his screen at this exact width and height at start)

The safer way would probably to create a master session using PHP but I cannot give you an example since it've been to long and echo the body class if the master_session or variable is equal to true

Hope it helped!

Solution 3:

If you try to fight Same_origin_policy and try to fight it I am sure you won't get much success their.

Server Side

I would suggest you Handle this on server-side, grab the web-page and apply whatever styling and scripts you want, should be very easy!!

If you use Ruby on rails - Nokogiri gem can help you to parse html. And you can use standard library to 'get' a webpage.

Client Side

If you want to do this on client side, you need to write some jquery/javascript code, you can take following steps:

1. Get the webpage you want to display.
2. Grab the element's which include js/css files, remove them and your own.
3. Display the page in new Iframe present in your page.