Ionic App中嵌入外部网页的问题
在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中嵌入外部网页的问题的更多相关文章
- 如何在Android应用中引入外部网页
在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...
- 转-使用 CefSharp 在 C# App 中嵌入 Chrome 浏览器
使用 CefSharp 在 C# App 中嵌入 Chrome 浏览器 2016-09-23 分类:.NET开发.编程开发.首页精华0人评论 分享到:更多3 本文由码农网 – 小峰原创翻译,转载 ...
- 博客代码:iframe—网页中嵌入其他网页
iframe 是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用.对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适.而对于在新浪博客里不支持的一些网页效果和代码,可先把他们 ...
- 在 C# App 中嵌入 Chrome 浏览器使用 CefSharp
介绍 以前曾试过在app中整合一个可靠又快速的web浏览器吗? 在本文中,你会学到如何轻松地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到你的C# app中. 然后,你可以使用此 ...
- App中嵌入网页浏览器
TOWebViewController 插件 NSURL *url =[NSURL URLWithString:@"http://192.168.1.134:8180/Home/IndexP ...
- [置顶] ios App 中嵌入应用商店
昨晚同事拿了一个app 发现其app 内部页面打开了appstore 并没有唤起手机自带的appstore, 刚开始以为是用webview 加载的 ,可是自己些了一个demo 发现并不是那样一回事 用 ...
- App中显示html网页
在现在的移动开发中,越来越多的web元素增加到了app里面,hybrid app可以综合native app 和 web app的长处,可以通过webView实现 htmllayout.xml: &l ...
- 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?
webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...
- C# App 中嵌入 Chrome 浏览器
http://www.codeceo.com/article/cefsharp-charp-app-chrome.html http://developer.51cto.com/art/201304/ ...
随机推荐
- (网页)SQLserver中在上线的项目中遇到科学计数法怎么办?
遇到这个问题,首先上线的数据能清除吗?显然是不能的. 1.首先要去找这些科学计数法的数字是哪里来的. 2.怎么在不改变数据的情况下去操作这张表.可以使用convert()转一下Decimal.
- SVN——Couldn't perform atomic initialization
前言 今天早上刚刚打开我的电脑,就被李总他们告知不能正确用SVN从服务器上下载代码了,然后看问题吧.问题其实也是本文的标题,并不难解决,写下来留个记录,顺便也算是一种分享.问题截图如下: 造 ...
- Asp.Net WebApi Post请求整理(一)
Asp.Net WebApi+JQuery Ajax的Post请求整理 一.总结 1.WebApi 默认支持Post提交处理,返回的结果为json对象,前台不需要手动反序列化处理.2.WebApi 接 ...
- ubuntu 配置拼音输入法步骤
今天配置了一下 ubuntu 拼音,要求使用ubuntu 内置拼音.大致步骤我记录一下: 配置拼音,使用 ibus pinyin,网上有很多帖子大致步骤: 1)安装 中文语言 2)安装ibus 3) ...
- Win10系统电脑桌面图标没有了怎么办
win10系统相对来说还是有些不稳定的,有时候打开电脑会发现,桌面上的图标不见了,遇见这种情况,先别着急,可以使用两种很简单的方法来解决. 方法一: 在桌面上右键,点击查看,看“显示桌面图标”这一项前 ...
- Reachability
一.Reachability中介绍了取得/检测网络状态的方法. 二.使用 1.添加源文件:Reachability.h和Reachability.m 2.添加framework———SystemCon ...
- Alpha冲刺! Day6 - 砍柴
Alpha冲刺! Day6 - 砍柴 今日已完成 晨瑶:讨论确定/解决了:网络判断使用广播方式.密集光点排布问题.丢失.db/记录html/多媒体文件的处理方式. 昭锡:Android工具包接口文档编 ...
- Java JDK1.5、1.6、1.7新特性整理
转载请注明出处:http://www.cnblogs.com/tony-yang-flutter 一.Java JDK1.5的新特性 1.泛型: List<String> strs = n ...
- NDK/JNI学习--环境搭建
基于Windows来开发Android的NDK.JNI须要的环境搭建,所须要的软件例如以下: Android 开发环境的基本配置(SDk,ADT.Eclipse IDE.JDK) 这些都是 ...
- UVA10562-Undraw the Trees(递归)
Problem UVA10562-Undraw the Trees Accept: 1199 Submit: 8397 Time Limit: 3000 mSec Problem Descripti ...