在framework7封裝器中加載外部頁面

Question

我有一個framework7應用程序，我有一個要求將外部頁面加載到應用程序中。這意味着導航欄和所有應該保持在頂部，但我應該能夠顯示正文內的外部網址的內容。更像是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

我試過使用$$。get，但它包含了他們的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'); 
});