javascript - 在没有 iframe/ajax 的情况下将外部网页嵌入到 html 中

Question

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

Refused to display 'https://xyz.com' in a frame because it set 'X-Frame-Options' to '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 标签的情况下使用正确的 css 和 js 呈现(我在服务器端无法控制这部分)在 HTML 页面内显示外部网站？我在 SO 上搜索了很多问题，其中大多数都告诉我们使用 ajax 但这有 css 问题。谁能帮我解决这个问题？

Answer 1

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

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

   • 实现您自己的缓存以加快速度。
   • 对您不想下载的 URL 使用黑名单。
   • 曹岚的Async.js图书馆对此非常有用。
   • 对于 CSS 资源，您仍然需要下载其中的图像并更改指向这些资源的链接。
   • 图像只能转换为Base64 HTML 中的表示以减少要处理的回调。
   • 这样您就可以使用 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);