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

Question

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

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

我已经能够使用 iframe 在我的页面中可视化其他站点，但不幸的是，由于 "same origin policy"，无法更改其可视化和访问其元素。 .

有没有办法使用 iframe 或将外部站点加载到另一个元素中来做到这一点？

---

更新:

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

• 创建一个 php 代理页面以加载目标站点并更改其可视化。
• 创建浏览器扩展程序。

我试过第一个，即使它需要安装一个网络服务器(xampp)，一个简单的页面调用函数 file_get_contents('http://www.site.com');
该页面已加载但不幸的是缺少一些元素(如图像)并且它只是一个静态副本；
无法在站点导航中继续前进。

---

更新 2:

如果可以实时更改代码，那么通过 javascript 加载整个页面可能是更好的解决方案(我不知道怎么做)，但是与此“页面副本”交互并将交互转移到原来的？

方案:

---

解释:

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

---

更新 3:

我找到了一个适用于 FireFox 和 Chrome 的扩展，它非常接近我的目标:"Stylish"
此插件允许实时更改任何站点的 css 属性并保存它，以便在您每次访问该页面时重新加载它们。

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

---

最终编辑:

为了用更相关的论点继续这个问题，我决定问一个新的:
create a php proxy page

Answer 1

没有。您的解决方案可能是

• 让您自己的网站充当代理，以免触发同源策略
• 构建一个依赖于浏览器(Firefox 或 Chrome)并且需要授权和安装的扩展