如果直接写路径到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. npm -D -S -g -i 以及安装技巧

    繁杂:npm install webpack 简洁:npm i webpack 重复性操作: npm i webpack npm i babel-core .... 简洁性操作: npm i webp ...

  2. Android学习(九) SharedPreferences

    一.SharedPreferences:一种清醒的存储方式,基于XML存储key-value键值对方式的数据. SharedPreferences对象本身只能获取数据,而不能存储和修改数据,存储修改只 ...

  3. 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记30 ScrollView Demo实战

    在上一话中我们创建了一个通过URL读取图片的Demo,这个Demo是不能拖动和缩放的.如今给它添加选项让它能够手动切换URL,并把图片加入到ScrollView中. 向Storyboard中拖入一个s ...

  4. R 安装 简单实用

    下载和安装Windows环境的R 1.进入主页,点击 蓝色加粗的 download R 2.随便点击一个镜像,这里点击的是http://mirror.fcaglp.unlp.edu.ar/CRAN/ ...

  5. [译] JavaScript 的事件循环

    译者注 本译文基本是按原文的意思来翻译,但对于 JavaScript 的事件循环,个人感觉还是 Philip Roberts 的视频讲解更形象些,思路和本文大致相同,不过他把事件表理解为 Web AP ...

  6. asp.net core mvc视频A:笔记3-6.视图数据共享之session/cache

    第一部分:Session讲解 会话级别的,怎么区分呢?以浏览器为单位,比如IE,搜狗等等,都算一个单独的会话 修改3.5项目 控制器代码 前端显示 startup.cs中配置并启用Session 运行 ...

  7. elk升级文档

    1.kibana等都统一版本了,5.4版本的kibana要5.4版本的elasticsearch 2.现有架构: logstash logstash读取日志-------->内网redis做队列 ...

  8. hdu 3172 Virtual Friends(并查集,字典树)

    题意:人与人交友构成关系网,两个人交友,相当于两个朋友圈的合并,问每个出两人,他们目前所在的关系网中的人数. 分析:用并查集,其实就是求每个集合当前的人数.对于人名的处理用到了字典树. 注意:1.题目 ...

  9. Jenkins入门(一)

    Jenkins就是一个Java Web应用,它主要是干什么呢? 其实很简单: 下载一个jenkins的war包,然后扔到tomcat 的webapps中,启动这个tomcat,访问jenkins应用即 ...

  10. rsync客户端命令使用简介

    rsync是linux下很流行的增量备份工具,也支持本地文件(夹)复制至远程,而且支持只传输增量部分,也是一个代码(程序)发布的好工具. 基本用法如下: rsync [一堆选项] 源文件(夹) 目标文 ...