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

时间:2012-12-08 15:18:58

标签: javascript jquery html css ajax

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

这是一张更好地解释我的任务的图片:

enter image description here

我已经能够使用iframe可视化我页面中的其他网站,但遗憾的是,由于"same origin policy",无法更改其可视化并访问其元素。

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


更新

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

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

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


更新2:

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

方案:

enter image description here


解释

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


更新3:

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

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


最终编辑:

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

3 个答案:

答案 0 :(得分:2)

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

  • 让您自己的网站充当代理,因此不会触发相同的原始政策
  • 构建扩展程序,该扩展程序将取决于浏览器(Firefox或Chrome),并且需要授权和安装

答案 1 :(得分:1)

我不确定我是否理解你想要的东西,但我对''欺骗''这种更容易的感觉可能会给你的第一个网站(iframe)提供非常具体的高度和宽度并做一个jQuery条件

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

然后,你只需要做你的css .isiFrame .myCoolDivs {....} 您可能还必须在准备好的文档上使用它,但这可能是欺骗它的一种方式,因为您没有在调整大小时执行此操作(如果有人在开始时将其屏幕设置为此精确的宽度和高度,则会显示)

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

希望它有所帮助!

答案 2 :(得分:0)

如果你试图打击 Same_origin_policy 并尝试对抗它,我相信你不会取得太大的成功。

服务器端

我建议你在服务器端处理这个,抓住网页并应用你想要的任何样式和脚本,应该很容易!!

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

客户端

如果你想在客户端这样做,你需要编写一些jquery / javascript代码,你可以采取以下步骤:

  1. 获取您要显示的网页。
  2. 抓住包含js / css文件的元素,删除它们和你自己的文件。
  3. 在页面中显示的新iframe中显示页面。