如果直接写路径到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. Android学习(十七)自定义View控件 TopBar

    一.创建自定义TopBar头部菜单条 实现步骤: 1.在values中添加attrs.xml文件,设置自定义属性. 2.添加Topbar类,继承RelativeLayout,实现具体功能. 3.添加到 ...

  2. 解决safari中iframe嵌入不能滚动的问题

    做完了个webapp之后,开发的时候一直在浏览器上模拟ios,没有任何问题,谁知交差的时候,客户告知在ios浏览器中不能滚动嵌入的iframe,直接就滚动外层整个document了,你知道docume ...

  3. javax.mail Java Extension(扩展)

    http://baike.baidu.com/view/616724.htm JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便 ...

  4. preloadjs实现网页资源预加载

    <!doctype html> <html lang="zh"> <head> <title>PreloadJS的基础使用</ ...

  5. Android适配方案小结(二)

    该节主要记录从代码中获取与屏幕适配相关的各个參数: Java代码例如以下 public class ScreenUtil { /** * Note: * 仅仅有activity能够使用getWindo ...

  6. 【已解决】iView-admin Editor 组件 绑定默认值问题

    iView-admin Editor 组件 绑定默认值问题 发现 editor 组件,设置v-model 后, 修改 v-model 数据, editor组件没有自动渲染,需要手动设置渲染  this ...

  7. hibernate之6.one2many单向

    表结构: 实体类图: CRUD: Student: package com.demo.model; import java.io.UnsupportedEncodingException; impor ...

  8. 【cocos2dx开发技巧10】cocosStudio的集成以及c++11的新特性

    转发.请保持地址:http://blog.csdn.net/stalendp/article/details/38880997 非常长时间没有碰cocos2dx了,近期又用起来了.花了好几个小时又一次 ...

  9. js中box和box()的区别

    window.onload = function(){ var input = document.getElementByTagName('input')[0]; input.onclick = bo ...

  10. MapReduce源码分析之LocatedFileStatusFetcher

    LocatedFileStatusFetcher是MapReduce中一个针对给定输入路径数组,使用配置的线程数目来获取数据块位置的实用类.它的主要作用就是利用多线程技术,每个线程对应一个任务,每个任 ...