在没有 iframe/ajax 的 html 中嵌入外部网页

Question

我正在开发 Phonegap 应用程序，基本上我想在我的 html 页面中嵌入一个外部网页，对我来说是的，有各种可用的选项。我尝试使用<iframe> 方法，但出现以下错误：

拒绝在框架中显示“https://xyz.com”，因为它将“X-Frame-Options”设置为“DENY”

由于我无法控制服务器端，因此排除了在 iframe 中加载网页的可能性。

我也试过用ajax方法：

       $.ajax({
          crossOrigin: true,
          url: 'https://xyz.com',
          success: function(data) {
            $( '#bodyFrame' ).html(data);
          }
        });

它工作正常，但最大的问题是它不呈现 CSS/Javascript，它只显示纯 html。

我尝试使用 <link rel="import" href="https://xyz.com"> 现在遇到跨域问题。

我的问题是，有没有办法在没有 IFrame/embed/object 标签的情况下在 HTML 页面内显示具有正确 css 和 js 渲染的外部网站（我无法在服务器端控制这部分）？我搜索了很多关于 SO 的问题，其中大多数都告诉使用 ajax 但这有 css 问题。任何人都可以帮助我吗？

Answer 1

嗯，我认为您至少有几个选择。

1. 像我刚刚为我的项目所做的那样，我需要能够离线显示整个页面：加载该页面的 HTML，遍历它（使用正则表达式）以找出所有资源链接（JS、CSS、图像）并下载那些（存储到文件系统）。下载后，将 URL 更改为初始 HTML 上本地文件的 URI。之后为用户显示该 HTML。 关于这种方式的一些特别之处，不分先后：

   • 实现自己的缓存以加快速度。
   • 对不想下载的 URL 使用黑名单。
   • caolan 的 Async.js 库非常适合这个。
   • 对于 CSS 资源，您仍然需要下载其中的图像并将链接更改为这些资源。
   • 图像可以仅转换为 HTML 中的Base64 表示形式，以减少需要处理的回调。
   • 这样您就可以使用 iframe。

2. 这与第一个非常相关，但通过成功回调的 HTML 并获取 JS 和 CSS 的所有链接，并使用 here 描述的技术为您重新加载这些链接。

以下是该方法的摘要：

var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);