Load any website in PhoneGap app with custom toolbar, Android

Question

Here is the part of my mobile app I can't make work. The idea is that when user taps on a particular element (say a link), I need an external url to be loaded and displayed on the screen with specific bars on top and bottom. And a user should be able to navigate through links on this webpage. So here is what I tried:

iFrame
I tried to load websites using iFrame. Worked, but some of them do not allow to be loaded in the iFrame. For example google.com, youtube.com, theguardian.co.uk. Even if I have in my config.xml
<access origin="*" />
.load();
jQuery .load() function works somewhat better. It can load google.com, for example. But some images would be missing from the webpage. And search won't work there. Probably it can be solved somehow with a relative path, but I had no luck trying to make it work.
inAppBrowser Plugin
It can load pages, indeed. But what I need is a top and a bottom bar on top and on the bottom of the webpage view. I need it in order to have a quick access to some particular function of my app. And design-wise. Haven't found a workaround here. Tried childBrowser also, but it seems it is not supported anymore.

Since I am kind of desperate already, I will consider any solution you can suggest. Would be super great if it can be solved by some plugin and some JS code, but I understood already that I am not in the position to demand :\

So, for example, here is my html code:

<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>

And this an example of what I am trying to do:

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

Expected result is to see a page fully loaded in a div, framed on top and bottom by custom html based bars.

Don't hesitate to ask for any further information, I am pretty sure there is something you can particularly be interested in.

Thank you in advance.

What kind of behaviour do you want for the toolbars? They can be javascript - html toolbars, or have to be native? — Víctor, May 18 '16 at 15:50
I would prefer to have them Html/Js. Because they launch some other functions of my app written in JS and they fetch some info (title of the page and it's url). But if the last sentence is not a problem, then it can be anything. — Denis, May 18 '16 at 15:53
Then you should make iframes, load the webpage inside it, make your toolbars in javascript, and fix your problems with pages that dont load, because all should it work. Look for whitelist plugin wildcards in SO — Víctor, May 18 '16 at 15:57
@Del, one last question. Are you 100% sure that all should work? Because I use `` in my config.xml and still more or less all wesbsites work, but not the hugest ones, which kind of make sense. What else could be the reason for google not to load in an iframe? — Denis, May 18 '16 at 19:07
The whitelist plugin is included in the last versions of cordova, so you dont have to do that, Im going to write a response with the correct configuration — Víctor, May 19 '16 at 14:24

score 0 · Answer 1 · answered May 19 '16 at 14:26

0

If you are using cordova 5 or above, you should use whitelist plugin which should be previously included. Do cordova plugin list before adding

Also you should add this to your config.xml:

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

You can be more concrete if you want.

And also add this meta to your index.html, or main page

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

answered May 19 '16 at 14:26

Víctor

3,029
3
28
43

Hi @Del, thank you for helping me out. I actually tried these solutions already. And whitelist plugin is there, indeed, I use Adobe builder. But it still doesn't work. For example if you try to load YouTube it goes: "Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'" – Denis May 19 '16 at 15:48
check this http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin – Víctor May 19 '16 at 15:50
Thank you @Del. But unfortunately it doesn't solve the issue. I am not looking for a workaround for youtube specifically (and this one won't work for the main youtube page actually, only for videos), I need some solution for all instances, if it is possible. – Denis May 20 '16 at 09:40

score 0 · Answer 2 · answered May 19 '16 at 14:57

@Del is correct in that those <access-*> tags will allow everything to load properly but @Denis is still faced with creating those custom toolbars. I would suggest using those tags, along with making an AJAX call to the site you're trying to show to get the HTML content in the background. In the success callback of that AJAX call, create the new page you want with those custom toolbars.

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

My main problem with .load(), ajax or iFrame is actually that they don't allow to load things properly. So if I apply your code to http://youtube.com, for example, it doesn't work (tried to console.log(results), works not in success in your example). And Ripple (tool I use for debugging) doesn't say anything :( — Denis, May 19 '16 at 15:59

Load any website in PhoneGap app with custom toolbar, Android

2 Answers2