加载外部站点并更改其可视化-loadexternalsiteandchangeitsvisualization

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 Inspector of Chrome.

我正在尝试创建一个能够更改网站可视化(.css或/和.js)的网页,以便重新创建Firebug for Firefox或Chrome Inspector所使用的相同实时更改功能。

Here an image to better explain my task:

这里有一张图片来更好地解释我的任务:

I have been able to visualize the other site inside my page using the iframe, but unfortunately it is not possible to change its visualization and access its elements due to the "same origin policy".

我已经能够使用iframe可视化我的页面内的其他站点,但遗憾的是,由于“相同的原始策略”,无法更改其可视化并访问其元素。

Is there a way to do this using the iframe or loading the external site inside another element?

有没有办法使用iframe或在另一个元素内加载外部网站?

Update:

Considering the answers the options should be:

考虑到答案,选项应该是:

• create a php proxy page to load the target site and change visualization on it.

创建一个php代理页面来加载目标站点并在其上更改可视化。

• create a browser extention.

创建浏览器扩展。

I've tried the first, even if it requires to install a web server (xampp), with a simple page calling the function file_get_contents('http://www.site.com');
The page is loaded but unfortunately missed some elements (like images) and it is only a static copy;
it is not possible to go further in the site navigation.

我已经尝试了第一个,即使它需要安装一个Web服务器(xampp),一个简单的页面调用函数file_get_contents('http://www.site.com');页面已加载,但遗憾的是错过了一些元素(如图像),它只是一个静态副本;它不可能在网站导航中更进一步。

Update 2:

Load the entire page via Javascript could be the better solution (I don't konw how) if it is possible to live change the code but what about the possibility to interact with this "page copy" and transfer the interaction to the original one?

通过Javascript加载整个页面可能是更好的解决方案(我不知道如何)如果可以实时更改代码,但是如何与这个“页面副本”交互并将交互转移到原始的?

Scheme:

Explanation:

I've noticed Firebug extention can select and live edit any page element, even if they belong to the iframe which loads an external domain page.
What I'm looking for is a way to act like Firebug, get an element and change its style.
I'm trying to load the site into the iframe beacuse I wanted to create a toolbar above it to select my "visualization styles"; for example a button to makes titles bigger and red.
Anyway I'm open to any other methods suggestions.

我注意到Firebug扩展可以选择并实时编辑任何页面元素,即使它们属于加载外部域页面的iframe。我正在寻找的是一种像Firebug一样的方式,获得一个元素并改变它的风格。我正在尝试将网站加载到iframe中,因为我想在它上面创建一个工具栏来选择我的“可视化样式”;例如,一个按钮,使标题更大和更红。无论如何,我对任何其他方法建议持开放态度。

Update 3:

I have found an extention for both FireFox and Chrome which is really close to my aim: "Stylish"
This add on allows to live change any site css proprerty and save it in order to reload them every time you'll visit the page.

我发现FireFox和Chrome的扩展非常接近我的目标:“时尚”这个添加允许更改任何网站css proprerty并保存它以便每次访问页面时重新加载它们。

Now my question is: How can I do the same creating a dedicated page to load and change visualization of a specific site?

现在我的问题是:我如何创建一个专用页面来加载和更改特定站点的可视化?

FINAL EDIT:

In order to continue this question with a more relevant arguments I decided to ask a new one:
create a php proxy page

为了用更相关的参数继续这个问题,我决定问一个新问题:创建一个php代理页面

3 个解决方案

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