加载外部站点并更改其可视化
我正在尝试创建一个能够更改网站可视化（.css或/和.js）的网页，以便重新创建Firebug for Firefox或Chrome Inspector所使用的相同实时更改function。
这里有一张图片来更好地解释我的任务：
我已经能够使用iframe可视化我的页面内的其他站点，但遗憾的是，由于“相同的原始策略”，无法更改其可视化并访问其元素。
有没有办法使用iframe或在另一个元素内加载外部网站？
更新：
考虑到答案，选项应该是：
- 创建一个php代理页面来加载目标站点并在其上更改可视化。
- 创建浏览器扩展。
我已经尝试了第一个，即使它需要安装一个Web服务器（xampp），一个简单的页面调用函数file_get_contents('http://www.site.com') ;
页面已加载，但遗憾的是错过了一些元素（如图像），它只是一个静态副本;
它不可能在网站导航中更进一步。
更新2：
通过javascript加载整个页面可能是更好的解决方案（我不知道如何）如果可以实时更改代码，但是如何与这个“页面副本”交互并将交互转移到原始的？
方案：
说明：
我注意到Firebug扩展可以选择并实时编辑任何页面元素，即使它们属于加载外部域页面的iframe。
我正在寻找的是一种像Firebug一样的方式，获得一个元素并改变它的风格。
我正在尝试将网站加载到iframe中，因为我想在它上面创建一个工具栏来选择我的“可视化样式”; 例如，一个按钮，使标题更大和更红。
无论如何，我对任何其他方法建议持开放态度。
更新3：
我发现FireFox和Chrome的扩展非常接近我的目标： "Stylish"
这个添加允许实时更改任何网站css proprerty并保存它，以便每次访问页面时重新加载它们。
现在我的问题是：我如何创建一个专用页面来加载和更改特定站点的可视化？
最终编辑：
为了用更相关的论点继续这个问题，我决定问一个新问题：
创建一个php代理页面
不，您的解决方案可能是
- 让您自己的网站充当代理，因此不会触发相同的原始政策
- 构建一个扩展，它将取决于浏览器（Firefox或Chrome），并且需要授权和安装
我不确定我是否理解你想要的东西，但是我对”欺骗”这种更容易的感觉可能会给你的第一个网站（iframe）提供非常具体的高度和宽度并做一个jQuery条件
If ($('body').width() == 500 && $('body').height() == 400 { $('body').addClass('isiFrame'); }
然后，你只需要做你的css .isiFrame .myCoolDivs {….}你可能也必须在文档就绪上使用它，但这可能是一种欺骗它的方法，因为你没有在resize时这样做（如果有人在开始时以这个确切的宽度和高度显示他的屏幕，请注意）
更安全的方法可能是使用PHP创建一个主会话但我不能给你一个例子，因为它已经很长并且如果master_session或变量等于true则回显body类
希望它有所帮助！
如果你试图打击Same_origin_policy并试图打击它，我相信你不会取得太大的成功。
服务器端
我建议你在服务器端处理这个，抓住网页并应用你想要的任何样式和脚本，应该很容易！
如果你在rails上使用Ruby – Nokogiri gem可以帮助你解析html。 您可以使用标准库来“获取”网页。
客户端
如果你想在客户端这样做，你需要编写一些jquery / javascript代码，你可以采取以下步骤：
- 获取您要显示的网页。
- 抓住包含js / css文件的元素，删除它们和你自己的文件。
- 在页面中显示的新Iframe中显示页面。