#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>
这几乎可以工作，因为出现了两个问题：
- 复杂网站的渲染失败（例如 Stack Overflow）；
- 用户无法浏览加载的网站，因为 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>
这有点好：
- 渲染失败更少（例如，Google 仍然搞砸了，而 Stack Overflow 不再）；
- 网址仍然是错误的。
怎么可能达到我的目的？无论是管理这些相对 URL 的解决方案，还是仍然适合我需要的完全不同的解决方案，都将受到欢迎。
Since jsFiddle isn't powerful enough for such complex asynchronous requests, below are the source codes of the three attempts I provided:
- Using
iframe: iframe.html - Using AJAX: ajax.html
- Using both: both.html