加载外部网站，并更改其可视化

Question

我试图创建一个网页，可以更改网站可视化（.css或/和.js），以重新创建Firebug for Firefox或Chrome的督察。

这里的图像，以便更好地解释我的任务：

我已经能够想象使用的iframe我的网页里面的其他部位，但不幸的是这是不可能改变其可视化和访问其元素归因于"same origin policy"。

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

---

更新：

考虑答案的选项应该是：

• 创建一个PHP代理页面加载目标网站，并改变它的可视化。
• 创建浏览器扩展。

我已经试过了第一，即使需要安装一个Web服务器（XAMPP），用一个简单的页面调用该函数file_get_contents('http://www.site.com');
页面被加载，但不幸的是错过了一些元素（如图像），它只是一个静态副本;
无法在网站导航中继续使用。

---

更新2：

负载通过JavaScript整个页面可能是更好的解决方案（我却不知道怎么做），如果有可能改变生活的代码，但怎么样的可能性与这个“页面副本”进行交互并将交互转移到原始页面？

方案：

---

说明：

我注意到萤火虫extention可以选择和现场编辑任何页面元素，即使他们属于哪个加载的iframe一个外部域名页面。
我正在寻找的是一种行为像Firebug，获得元素并改变其风格的方式。
我想将网站加载到iframe中，因为我想在它上面创建一个工具栏以选择我的“可视化样式”;例如一个使标题变大变红的按钮。
无论如何，我打开任何其他方法的建议。

---

更新3：

我已经找到了Firefox和Chrome浏览器的一个推广是非常接近我的目标："Stylish"
这加上允许住改任何网站的CSS proprerty和保存它是为了在每次访问该页面时重新加载它们。

现在我的问题是：如何创建专门的页面来加载和更改特定网站的可视化？

---

最后编辑：

为了继续这个问题，以更相关的论据，我决定要问一个新问题：
create a php proxy page

Answer 1

号您的解决方案可能是

• 让您自己的网站充当代理，因此不会触发相同的原产地政策
• 建立一个扩展，这将是依赖于浏览器（Firefox或Chrome），并且将需要授权和安装

Answer 2

我不知道如果我理解你想要什么非常好，但我感觉'绝招“”这更容易将可能给非常具体的高度和宽度，以你的第一个网站（iframe的），做一个jQuery条件

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

然后，你只需要做你的CSS .isiFrame .myCoolDivs {.. ..} 你也许还需要在文档上使用它，但这可能是一种欺骗它的方法，因为你没有在资源上使用它ize（如果有人在屏幕上显示此宽度和高度，请在屏幕上）

更安全的方法可能会使用PHP创建一个主会话，但我不能给你一个例子，因为它已经很长了， body class如果master_session或变量等于true

希望它有帮助！

Answer 3

如果您尝试打Same_origin_policy并尝试打击它，我相信你不会获得太多的成功。

服务器端

我建议你处理这个服务器端，抢网页和应用任何你想要的造型和脚本，应该是很容易的！

如果您在rails上使用Ruby - Nokogiri gem可以帮助您解析html。你可以使用标准库来“获取”一个网页。

客户端

如果你想这样做的客户端，你需要写一些jQuery的/ javascript代码，你可以采取以下步骤：

1. 得到你想要的网页，以显示。
2. 抓住包含js/css文件的元素，删除它们和你自己的。
3. 显示页面中新的Iframe中的页面。