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