Load an external page within framework7 wrapper

Question

I'm having a framework7 app and I have a requirement to load an external page into the app. It means the navigation bar and all should remain in the top but I should be able to show the content of the external url within the body. More like inapp browser.

I tried with iFrame but it doesn't work properly for https based urls. Is there any way of doing it?

Also note that if I add the external class into the anchor tag then the page opens in new window. Not inside the app.

Answer 1

Use AJAX to insert html into your page. Using Javascript you can load an 'external' page (EXTERNALPAGE.php) into a <div> of you choosing (PAGEPlaceholder).

Below is a summary of suggested code, this is NOT a working example...

Your HTML could look something like this:

<div data-page="PAGENAME" class="page navbar-through toolbar-through">

<div class="navbar ">
    <div class="navbar-inner">              
         <div class="left"></div>
        <div class="center sliding">Page Title</div>
        <div class="right"></div>
    </div>
</div>  


<div class="page-content ">         
    <div id="PAGEPlaceHolder"></div>                                                    
</div>
...

And the JS could look something like this:

myApp.onPageInit('PAGENAME', function (page) {  

$$.get('EXTERNALPAGE.php', {}, function (data) {        
        $$('#PAGEPlaceHolder').html(data);          
    });     
});

Answer 2

I tried using $$.get but it was including their css which messed up my stuff so I ended up using an iframe to isolate it in a popup.

$$(document).on('click', '.open-popup', function (e) {
    var link = this.data("url");
    var iframe = '<iframe width="100%" style="height: 100em;" src="http://cors.io/?u=' + link + '" frameborder="0"></iframe>';
    $$('.popup-body').html("Loading...");
    $$('.popup-body').html(iframe);
    app.popup('.popup');
});