3

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

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

在此处输入图像描述

我已经能够使用 iframe 在我的页面中可视化其他站点，但不幸的是，由于“同源策略”，无法更改其可视化并访问其元素。

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

更新：

考虑到答案，选项应该是：

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

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

更新 2：

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

方案：

在此处输入图像描述

解释：

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

更新 3：

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

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

最终编辑：

为了用更相关的论点继续这个问题，我决定问一个新的问题：
创建一个 php 代理页面

4

3 回答 3

2

不，您的解决方案可能是

  • 让您自己的站点充当代理，因此不会触发同源策略
  • 构建一个扩展，这将依赖于浏览器（Firefox 或 Chrome），并且需要授权和安装
于 2012-12-08T15:20:49.153 回答
1

我不确定我是否非常了解您想要什么，但我觉得“欺骗”这更容易可能会给您的第一个站点（iframe）提供非常具体的高度和宽度并执行 jQuery 条件

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

然后，您只需要执行您的 css .isiFrame .myCoolDivs {....} 您可能还必须在准备好的文档上使用它，但这可能是一种欺骗它的方法，因为您没有在调整大小时这样做（如果有人在开始时将他的屏幕设置为这个精确的宽度和高度）

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

希望它有所帮助！

于 2012-12-08T15:39:03.570 回答
0

如果您尝试与Same_origin_policy 抗争并尝试与之抗争，我相信您不会获得太大的成功。

服务器端

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

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

客户端

如果您想在客户端执行此操作，则需要编写一些 jquery/javascript 代码，您可以采取以下步骤：

  1. 获取您要显示的网页。
  2. 抓取包含 js/css 文件的元素，删除它们和你自己的。
  3. 在页面中存在的新 iframe 中显示页面。
于 2012-12-08T18:43:38.673 回答