2 
#ontop {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 0;
    bottom: 90%;
    background-color: yellow;
}
#content {
    position: absolute;
    width: 100%;
    height: 90%;
    top: 10%;
    bottom: 0;
    border: 0;
}

鉴于上述 CSS，是否可以在 DOM 元素中加载外部网站#content以允许用户浏览它？然后，该#ontop元素将能够向当前加载的网站提出一些附加功能。

iframe通常表现得像我想要的那样：

<div id="ontop">Always on top</div>
<iframe id="content" src="http://en.wikipedia.org/"></iframe>

iframe不过，出于安全目的，一些网站（例如 Stack Overflow）会避免在其中访问其内容。

<div id="ontop">Always on top</div>
<iframe id="content" src="http://www.stackoverflow.com/"></iframe>

上面的代码段不会加载网站内容，同时抛出以下错误：由于 X-Frame-Options 禁止显示而拒绝显示文档。

然后我尝试使用 AJAX 来满足我的需求（请参阅此 mod以允许使用 jQuery 进行跨域 AJAX 请求）：

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: 'http://www.stackoverflow.com/',
            type: 'GET',
            success: function(data) {
                $("#content").html(data.responseText);
            }
        });
    });
</script>
<div id="ontop">Always on top</div>
<div id="content"></div>

这几乎可以工作，因为出现了两个问题：

  1. 复杂网站的渲染失败（例如 Stack Overflow）；
  2. 用户无法浏览加载的网站，因为 URL（例如链接、请求）现在与运行上述脚本的服务器相关。

我终于尝试将两个第一个解决方案结合起来：

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: 'http://www.stackoverflow.com/',
            type: 'GET',
            success: function(data) {
                $("#content").contents().find('body').append(data.responseText);
            }
        });
    });
</script>
<div id="ontop">Always on top</div>
<iframe id="content"></iframe>

这有点好：

  1. 渲染失败更少（例如，Google 仍然搞砸了，而 Stack Overflow 不再）；
  2. 网址仍然是错误的。

怎么可能达到我的目的？无论是管理这些相对 URL 的解决方案，还是仍然适合我需要的完全不同的解决方案，都将受到欢迎。

Since jsFiddle isn't powerful enough for such complex asynchronous requests, below are the source codes of the three attempts I provided:

4

1 回答 1

4

It looks like you've already discovered why this is difficult to do on the web, partially deliberately in order to prevent people from maliciously loading their website into another website.

With that in mind, if I were in your position I would investigate writing either a browser extension (Chrome, Firefox) ,or perhaps a bookmarklet, all of which preserve the site's functionality while at the same time injecting JavaScript into the page that gets around the permissions issues that you are experiencing.

The advantage of a bookmarklet is that it should be the least amount of work and the most cross-browser solution, at the cost of power and flexibility. If you'd like the ability to have nice interfaces that act like part of the browser and don't require the user to activate the bookmarklet whenever it's appropriate, then look into an extension, especially if your target audience is Chrome/FF users.

Note that if you absolutely have to have IE users, developing extensions for IE is not very user friendly, although certainly doable.

Also, if you want to prototype your FF extension a bit before committing to developing one, look into GreaseMonkey, an extension that essentially lets you write a lightweight version of extension code without worrying about the associated packaging.

于 2013-02-26T20:32:04.580 回答