angularjs 中的iframe 标签 ng-src 路径 z-index 必须有position
如果直接写路径到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的更多相关文章
- angularjs 中的iframe 标签 ng-src 路径
如果直接写路径到iframe标签里的ng-src中会出现报错: 解决方法: 1.ng里面有个属性是专门用来解决跨域问题的 $sce. 用法: $scope.someUrl = $sce.trustAs ...
- HTML <iframe> 标签的 src 属性
HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...
- thymeleaf中img标签图片src路径问题
转载自:解决java - Thymeleaf conditional img src 正确写法. <img class="layui-nav-img" th:src=&quo ...
- react项目中关于img标签的src属性的使用
在一个html文件中,img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片.如下: <img src="../images/photo.png"/> 但在j ...
- angularjs中动态为audio绑定src
今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.html获得解决,感谢! <div cl ...
- AngularJS 中<a> 超链接标签不起作用?
开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...
- angularjs中动态为audio绑定src问题总结
先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...
- Thymleaf中th:each标签遍历list如何获取index
简单介绍:传递给后台一个String类型的list,需要获取到list的每一个元素,然后进行筛选,得到正确的文本值,看代码就明白了 代码: //后台java代码//failList是一个String类 ...
- 怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)
iframe 怎么 在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定. iframe支持所有浏览器.下面来看语法: <iframe src="规定在 ifram ...
随机推荐
- vsftpd 配置:chroot_local_user与chroot_list_enable userlist_enable userlist_deny详解
默认情况下,如果设置了 userlist_enable=YES,当 userlist_deny 选项设置为 YES 的时候,userlist_file=/etc/vsftpd.userlist 中列出 ...
- <转>创建支持eclipse的多模块maven项目
如何使用eclipse创建Maven工程及其子模块 1,首先创建一个父类工程 子模块继承父类工程 并在父类工程的pom.xml文件中定义引入的jar及其版本号 子模块可以引用 2 ...
- 计算两个有序数组的第K大数(转)
传统解法,最直观的解法是O(m+n).直接merge两个数组,然后求第K大的数字. 如果想要时间复杂度将为O(log(m+n)).我们可以考虑从K入手.如果我们每次能够删除一个一定在第K个元素之前的元 ...
- HDU-1047-Integer Inquiry(Java大数水题 && 格式恶心)
Integer Inquiry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 仿百度壁纸client(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
仿百度壁纸client(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager + Fragm ...
- Servlet的API(二)
web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象和代表响应的response对象.request和response对象既然代表请求和响应,那我们获取 ...
- jdk1.6 升级到 jdk1.7
将 jdk1.6 升级到 jdk1.7 下载jdk-7u11-linux-x64.tar.gz tar zxvf jdk-7u11-linux-x64.tar.gz mkdir /usr/l ...
- Android XMPP 即时通讯
0 http://blog.csdn.net/lnb333666/article/details/7471292 0.1 http://www.cnblogs.com/charley_yang/arc ...
- 高盛CEO致大学毕业生:要与有野心的人为伍
我认为讲的非常棒.年轻人就要这样. 高盛集团首席运行官(CEO)劳尔德-贝兰克梵(Lloyd Blankfein)周四在曼哈顿贾维茨中心參加了拉瓜迪亚社区大学的第41届毕业典礼并发表演讲.在面向约10 ...
- Linux的IO栈