使用自定义工具栏，Android 在 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

如果您使用的是cordova 5 或更高版本，您应该使用whitelist plugin，它应该是之前包含的。在添加之前做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);
        }
    });
});