在PhoneGap应用程序中加载任何带有自定义工具栏的网站

Question

这是我的移动应用程序中我无法工作的部分。这个想法是，当用户点击一个特定的元素(比如一个链接)时，我需要一个外部url来加载并显示在屏幕上，并在顶部和底部显示特定的条。用户应该能够浏览这个网页上的链接。以下是我尝试过的：

1. iFrame 我试着用iFrame加载网站。工作正常，但其中一些不允许在iFrame中加载。例如google.com，youtube.com，theguardian.co.uk。即使我有我的config.xml <access origin="*" />
2. .load(); jQuery .load()函数工作得更好一些。例如，它可以加载google.com。但是网页上会缺少一些图片。在那里搜索是行不通的。也许它可以用一条相对的路径来解决，但我没有运气试图让它发挥作用。
3. inAppBrowser插件 它确实可以加载页面。但我需要的是一个顶部和底部的顶部和底部的网页视图。我需要它，以便有一个快速访问某些特定的功能，我的应用程序。从设计上讲。还没找到解决办法。也尝试过childBrowser，但似乎不再支持它了。

既然我已经有点绝望了，我会考虑你能提出的任何解决方案。如果能用一些插件和一些JS代码来解决这个问题，那就太棒了，但我已经明白，我不能要求:\

例如，下面是我的html代码：

<div id="main-screen">
  <div id="links">
    <a href="http://google.com" class="link">
      Google
    </a>
    <a href="http://youtube.com" class="link">
      YouTube
    </a>
  </div>
</div>

<div id="web-container">
  <div id="top-bar">
  </div>

  <div id="web-content">
  </div>

  <div id="bottom-bar">
  </div>
</div>

这就是我想要做的一个例子：

$(document).on('click','a',function(e) {
  $('#main-screen').hide();
  $('#web-container').show();
  $('#web-content').load($(this).attr('href'));
});

预期的结果是看到一个页面完全加载在一个div，框架在顶部和底部的自定义html条形图。

不要犹豫，要求任何进一步的信息，我很确定有一些东西，你可以特别感兴趣。

提前谢谢你。

Answer 1

如果您使用的是科多瓦5或以上，您应该使用白名单插件，这应该包括在前面。在添加之前执行cordova plugin list

此外，还应该将其添加到您的config.xml中：

<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />

如果你想的话，你可以更具体些。

并将此元添加到index.html或主页中。

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Answer 2

@Del是正确的，因为这些<access-*>标记将允许正确加载所有内容，但是@Denis仍然面临创建那些自定义工具栏的问题。我建议使用这些标记，同时对您试图显示的站点进行AJAX调用，以获取背景中的HTML内容。在AJAX调用的成功回调中，使用这些自定义工具栏创建所需的新页面。

$("a").click(function(){
    $('#main-screen').hide();
    $('#web-container').show();
    $.ajax({
        url: $(this).attr('href'), 
        success: function(result){
            $("#web-content").html(result);
        }
    });
});