angular1/angular2 嵌入外部链接
来源:互联网 发布:centos telnet 命令 编辑:程序博客网 时间:2024/06/16 03:41
如嵌入外部链接 url 为 https://www.baidu.com
AngularJS
两种方式处理
1.在Controller中直接使用 $sce 服务
在js中定义变量:
$scope.src = $sce.trustAsResourceUrl('https://www.baidu.com');
使用:
<iframe class="report-iframe" width="750px" height="750px" seamless frameBorder="0" ng-src="{{src1}}" >
2.自定义过滤器来处理,如
angular.module('app',[]).filter('to_trusted', function($sce) { return function(url) { return $sce.trustAsResourceUrl(url); }});
使用:
<iframe class="report-iframe" width="750px" height="750px" seamless frameBorder="0" ng-src="{{src1 | to_trusted}}" >
Angular2
同样两种处理方式
1. 在组件中直接处理
export class DemoUrlPage { url : SafeResourceUrl; constructor(private sanitizer: DomSanitizer) { } ionViewDidLoad() { this.url = this.sanitizer.bypassSecurityTrustResourceUrl('http://www.baidu.com'); }}
使用:
<ion-content padding> <iframe class="report-iframe" width="100%" height="300" [src]="url"></iframe></ion-content>
2.在管道中使用:
定义管道:
@Pipe({ name: 'safeUrl',})export class SafeUrlPipe implements PipeTransform { /** * Takes a value and makes it lowercase. */ constructor(private sanitizer: DomSanitizer) {} transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); }}
使用:
<ion-content padding> <iframe class="report-iframe" width="100%" height="300" [src]="url | safeUrl"></iframe></ion-content>
阅读全文
0 0
- angular1/angular2 嵌入外部链接
- 学习angular1还是angular2
- Angular2与Angular1的区别
- 第十一章 从angular1升级到angular2
- Angular2是Angular1的版本升级吗?
- (一) 从Angular1到Angular2的杂谈
- 【翻译】对比Angular1和Angular2中的依赖注入
- (二) 从Angular1到Angular2需要的预备知识
- Angular1
- angular1
- 嵌入外部页面
- 外部链接
- 外部链接
- 为什么有Angular1.x、Angular2.x和Angular4.x,没听说Angular3.x?
- 链接资源&嵌入资源
- LightSwitch中嵌入外部网页
- Flash,as3 外部嵌入字体
- winform嵌入外部exe文件
- 设计模式_迭代子模式(19)
- hive一些基本操作
- 在搜索引擎强调原创之下如何正确发布外链
- Javaweb服务端开发学习(二)--MySQL和IDEA的简单使用
- MongoDB 更新篇
- angular1/angular2 嵌入外部链接
- Android中设置界面PreferenceFragment的用法
- 基于Qt的收银点餐系统之UI的基本实现(二)
- c指针解读之左右法则(2)
- ReactNative手动生成JSBundle文件
- 数据结构实验之栈与队列二:一般算术表达式转换成后缀式
- MySql基本语句(2)--如何实现select top n
- IE兼容模式文件上传所遇问题解决
- MacAPP开发上传错误