在app中不可避免的要引用第三方的页面,那么在Ionic中是如何实现呢?

1.设计引用外部页面的html框架页面,分3部分,表头有2个按钮,中间是引用的页面,底部隐藏分享相关按钮,具体页面如下:

<ion-view title="{{title}}" >

    <ion-nav-buttons side="left">
<a class="button button-icon ion-ios-arrow-back" ng-click="toClose()"></a>
</ion-nav-buttons> <ion-nav-buttons side="right">
<button class="button button-icon icon ion-android-share-alt" ng-disabled="showShare" ng-click="share()"></button>
</ion-nav-buttons> <ion-content >
<iframe id="extendIf" name="extendIf" ng-src="{{::plink}}" allowtransparency="true" allowfullscreen="true"
        allowfullscreenInteractive="true" border="0" frameborder="0" style="width:100%;height:100%;">
</iframe>
</ion-content>
<div class="bar bar-footer ">
<button class="button button-icon ion-ios-arrow-left" ng-click="hisGo(-1)" ng-disabled="hasBack" ></button>
<button class="button button-icon ion-ios-arrow-right" ng-click="hisGo(1)" ng-disabled="hasForward"></button>
<button class="button button-icon ion-ios-loop" ng-click="hisGo(0)"></button>
</div> </ion-view>

  主要还是使用了iframe标签。

2.设计对应的Controller层,接收用户的调用,代码如下:

angular.module("ionicApp.controllers")
.controller("OuterHtmlFrameController",function($scope, $stateParams, $interval)
{
function toCheck()
{
var o = $interval(function()
{
var frame = $("#extendIf").contents();
$scope.title = frame.find("title").text();
$scope.showShare = false;
$scope.title && $interval.cancel(o);
}, 100);
}
try
{
$scope.plink = $stateParams.link;
$scope.hasBack = 0;
$scope.hasForward = 0;
toCheck();
$("#extendIf").load(function()
      {
      toCheck();
      $(this).contents().find("[target='_blank']").attr("target", "_self");
      }); $scope.hisGo = function(e)
{
//.....
}; $scope.share = function()
{
//.....
};
}
catch (r)
{
$scope.hideLoad();
console.log(r);
}
});

  

3.调用外部页面

$state.transitionTo("outerHtmlFrame", { link: "http:baidu.com" });// outerHtmlFrame为路由标记名

Ionic App中嵌入外部网页的问题的更多相关文章

  1. 如何在Android应用中引入外部网页

    在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...

  2. 转-使用 CefSharp 在 C# App 中嵌入 Chrome 浏览器

    使用 CefSharp 在 C# App 中嵌入 Chrome 浏览器 2016-09-23    分类:.NET开发.编程开发.首页精华0人评论 分享到:更多3 本文由码农网 – 小峰原创翻译,转载 ...

  3. 博客代码:iframe—网页中嵌入其他网页

    iframe 是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用.对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适.而对于在新浪博客里不支持的一些网页效果和代码,可先把他们 ...

  4. 在 C# App 中嵌入 Chrome 浏览器使用 CefSharp

    介绍 以前曾试过在app中整合一个可靠又快速的web浏览器吗? 在本文中,你会学到如何轻松地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到你的C# app中. 然后,你可以使用此 ...

  5. App中嵌入网页浏览器

    TOWebViewController 插件 NSURL *url =[NSURL URLWithString:@"http://192.168.1.134:8180/Home/IndexP ...

  6. [置顶] ios App 中嵌入应用商店

    昨晚同事拿了一个app 发现其app 内部页面打开了appstore 并没有唤起手机自带的appstore, 刚开始以为是用webview 加载的 ,可是自己些了一个demo 发现并不是那样一回事 用 ...

  7. App中显示html网页

    在现在的移动开发中,越来越多的web元素增加到了app里面,hybrid app可以综合native app 和 web app的长处,可以通过webView实现 htmllayout.xml: &l ...

  8. 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?

    webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...

  9. C# App 中嵌入 Chrome 浏览器

    http://www.codeceo.com/article/cefsharp-charp-app-chrome.html http://developer.51cto.com/art/201304/ ...

随机推荐

  1. IDEA错误:Failed to start end point associated with ProtocolHandler [http-nio-9999] java.net.BindException: Address already in use: bind

    日志显示进程端口已被占用,首先需要的是查询什么进程占用了当前的9999端口. 1.win+R输入cmd进入命令界面: 2.输入命令  netstat -ano|findstr "端口号&qu ...

  2. (网页)the server responded with a status of 403 (Forbidden)

    403跨域问题.看一下要访问的url.

  3. C#语言————格式化数值结果表

    字符 说明                                     示例                                                 输出结果.C ...

  4. 理解inode 以及 软链接和硬链接概念区分

    inode简单理解 本文来源自网络文章,并针对文章内容加以批注和修改.希望能帮到你! 一. 磁盘设备 说到inode,首先必须要提及下<操作系统>中磁盘存储器的管理一节.磁盘设备是一种相当 ...

  5. python装饰器的实现

    说起装饰器我们可能已经很熟悉了(不了解的可以查看python基础学习——装饰器),随手就可以写一个简单的装饰器 def decorator(func): def inner(*args, **kwar ...

  6. mysql ANSI_QUOTES 这个sql_mode的作用(字段可以使用双引号)

    首先sql_mode用于mysql的行为,sql_mode的多个值之间用','分隔: 如果想使用双引号就这样做: 1. 修改/etc/my.cnf文件 ,  双引号模式是ANSI_QUOTES 或   ...

  7. VMware安装CentOS6

    1. 搭建虚拟化环境常见故障讲解 2. 安装CentOS Linux系统 ……………… PS:运维老鸟教你安装centos6.5如何选择安装包 3. 远程连接LInux ip配置 注意:不用做任何修改 ...

  8. Ulua对象管理方式

    不管是C++中还是在C#中,在都绕不开一个问题:类对象怎么在Lua中使用的问题,还好Lua提供了Userdata以及ligh Userdata结构类型,通过扩展可以处理这方面的问题.现在的很多框架也大 ...

  9. 【2017下集美大学软工1412班_助教博客】团队作业7——第二次项目冲刺(Beta阶段)成绩公示

    作业要求 团队作业7 团队评分结果 Beta计划 Total GN SX GJ LC AP WT PHILOSOPHER 3 1 0 1.5 0 0.5 0 三人行 3.5 1 1 1 0 0.5 0 ...

  10. 用智能TFT液晶模块这种串口屏做产品界面设计太简单了,大大的节省了开发时间

    随着科技的发展,TFT液晶显示屏在我们日常中可以随处可见. 工业设备上的显示也逐渐由段式显示.黑白显示转向彩色的TFT液晶显示屏. 普通的TFT液晶显示屏由于开发起来比较麻烦, 需要嵌入式工程时写程序 ...