Загрузите внешнюю страницу в оболочку framework7

Question

У меня есть приложение framework7, и у меня есть требование загрузить внешнюю страницу в приложение. Это означает, что панель навигации и все должны оставаться в верхней части, но я должен быть в состоянии показать содержимое внешнего URL-адреса внутри тела. Больше похоже на браузер inapp.

Я пробовал с iFrame, но он не работает должным образом для https-адресов. Есть ли способ сделать это?

Также обратите внимание, что если я добавлю класс external в тег привязки, страница откроется в новом окне. Не внутри приложения.

Answer 1

Используйте AJAX для вставки html на свою страницу. С помощью Javascript вы можете загрузить «внешнюю» страницу (EXTERNALPAGE.php) в выбранный вами <div> (PAGEPlaceholder).

Ниже приводится краткое описание предлагаемого кода, это не рабочий пример ...

Ваш HTML может выглядеть следующим образом:

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

И JS может выглядеть следующим образом:

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

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

Answer 2

Я попытался использовать $$. Получить, но он включал их css, который испортил мои вещи, поэтому я закончил использовать iframe, чтобы изолировать его во всплывающем окне.

$$(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'); 
});