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

使用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');
});

Load an external page within framework7 wrapper

2 个答案: