如果直接写路径到iframe标签里的ng-src中会出现报错;

  解决方法:

1、ng里面有个属性是专门用来解决跨域问题的 $sce。

  用法:

$scope.someUrl = $sce.trustAsResourceUrl('路径');
例:
<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">
<iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>
</ul> 2、可以巧用上面方法写一个过滤器。
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
例:
<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">
<iframe ng-src="{{someUrl |trustAsResourceUrl }}" height="100%" width="100%"></iframe>
</ul>

angularjs 中的iframe 标签 ng-src 路径 z-index 必须有position的更多相关文章

  1. angularjs 中的iframe 标签 ng-src 路径

    如果直接写路径到iframe标签里的ng-src中会出现报错: 解决方法: 1.ng里面有个属性是专门用来解决跨域问题的 $sce. 用法: $scope.someUrl = $sce.trustAs ...

  2. HTML <iframe> 标签的 src 属性

    HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...

  3. thymeleaf中img标签图片src路径问题

    转载自:解决java - Thymeleaf conditional img src 正确写法. <img class="layui-nav-img" th:src=&quo ...

  4. react项目中关于img标签的src属性的使用

    在一个html文件中,img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片.如下: <img src="../images/photo.png"/> 但在j ...

  5. angularjs中动态为audio绑定src

    今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.html获得解决,感谢! <div cl ...

  6. AngularJS 中<a> 超链接标签不起作用?

    开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...

  7. angularjs中动态为audio绑定src问题总结

    先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...

  8. Thymleaf中th:each标签遍历list如何获取index

    简单介绍:传递给后台一个String类型的list,需要获取到list的每一个元素,然后进行筛选,得到正确的文本值,看代码就明白了 代码: //后台java代码//failList是一个String类 ...

  9. 怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)

    iframe 怎么 在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定. iframe支持所有浏览器.下面来看语法: <iframe src="规定在 ifram ...

随机推荐

  1. 15款Java程序员必备的开发工具

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...

  2. 51nod 125乘法逆元 (扩展欧几里得)

    给出2个数M和N(M < N),且M与N互质.找出一个数K满足0 < K < N且K * M % N = 1,假设有多个满足条件的.输出最小的. Input 输入2个数M, N中间用 ...

  3. python——内置对象

    python的内置对象 对象类型 常量示例/用法 Number(数字) 3.14159, 1234, 999L 3+4j String(字符串) 'spam', "guido's" ...

  4. vuex mapMutations 使用

    你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit ...

  5. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  6. ios 不通过import 调用其他控制器的方法

    ios 开发过程中在不通过import 调用其他类的方法 //获取类名 Class controller = NSClassFromString(@"controller"); / ...

  7. UIWebView的全屏截图

    项目开发中,我们可能会遇到如下的应用场景:将一篇文章,进行截屏(需要全屏截取,包括滚动部分)后,分享到新浪微博.邮箱等等.前段时间,我在应用开发中实现了该功能,代码也是从网上找到的,自己整理了一下.主 ...

  8. OpenCv for Android 环境搭建

    最近工作需要这样的功能 如下图 要在类似功能在android上实现 然后实现成这样 这两张图来自博客:图像校正—透视变换 可惜他用的是C/C++语言写的调用opencv,我参考了下他写的方案就想到了a ...

  9. 一定要搜藏的20个非常有用的PHP类库

    一定要搜藏的20个非常有用的PHP类库 本文提供了20个非常有用的PHP类库的名称和下载地址.这20个PHP类库包含了图标库,RSS解析,缩略图生成,支付,OpenID,数据库抽象,PDF生成器等一系 ...

  10. 基于HttpClient实现网络爬虫~以百度新闻为例

    转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/40891791 基于HttpClient4.5实现网络爬虫请訪问这里:http:/ ...