在 framework7 包装器中加载外部页面

Posted 2023-02-23

【中文标题】在 framework7 包装器中加载外部页面

【英文标题】：Load an external page within framework7 wrapper

【发布时间】：2015-10-06 08:44:59

【问题描述】：

我有一个 framework7 应用程序，我需要将外部页面加载到应用程序中。这意味着导航栏和所有内容都应保留在顶部，但我应该能够在正文中显示外部 url 的内容。更像是应用内浏览器。

我尝试使用 iFrame，但它不适用于基于 https 的网址。有什么办法吗？

还要注意，如果我将external 类添加到锚标记中，则页面将在新窗口中打开。不在应用程序内。

【参考方案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);          
    );     
);

【参考方案2】：

我尝试使用$$.get，但它包含了他们的 css，这弄乱了我的东西，所以我最终使用 iframe 将其隔离在 popup .

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