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

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

就像我刚刚为我的项目所做的那样，我需要能够在线下显示整个页面：为该页面加载HTML，迭代它（使用正则表达式）以找出所有资源链接（JS， CSS，图像）并下载（存储到文件系统）。下载后，在初始HTML上将URL更改为本地文件的URI。之后显示HTML用户。关于这种方式的几点特别之处没有特别的顺序：
- 实施自己的缓存以加快速度。
- 对您不想下载的网址使用黑名单。
- caolan的Async.js图书馆对此很有帮助。
- 对于CSS资源，您仍然需要在其中下载图像并将链接更改为这些图像。
- 图像可以在HTML中转换为Base64表示，以减少要处理的回调。
- 这样您就可以使用iframe。
这与第一个问题非常相关，但是在成功回调中查看HTML并获取JS和CSS的所有链接，并使用描述here的技术为您重新加载。

以下是该方法的摘要：

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

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

1 个答案: