Question

以下是我无法开展工作的移动应用程序的一部分。我们的想法是，当用户点击特定元素（比如链接）时，我需要在屏幕上加载并显示外部网址，并在顶部和底部显示特定的条形图。用户应该能够浏览此网页上的链接。所以这就是我的尝试：

的iFrame
我尝试使用iFrame加载网站。已完成，但其中一些不允许加载到iFrame中。例如google.com，youtube.com，theguardian.co.uk。即使我在我的config.xml中 <access origin="*" />
.load（）;
jQuery .load（）函数效果更好一些。例如，它可以加载google.com。但是网页上会遗漏一些图片。搜索在那里不起作用。可能它可以通过相对路径以某种方式解决，但我没有运气试图让它工作。
inAppBrowser插件
它确实可以加载页面。但我需要的是网页视图顶部和底部的顶部和底部栏。我需要它才能快速访问我的应用程序的某些特定功能。并且设计明智。 Haven在这里找到了解决方法。尝试了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。在添加

之前

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

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

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

如果你愿意，你可以更具体。

并将此元数据添加到index.html或主页

grep

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);
        }
    });
});

使用自定义工具栏Android在PhoneGap应用中加载任何网站

2 个答案: