AngularJS 使用 angularjs 的时候，在 iframe 里面无法正确显示 src 指定的内容，

AngularJS 使用 angularjs 的时候，在 iframe 里面无法正确显示 src 指定的内容，

msms · 2014年05月21日 · 最后由 lyfi2003 回复于 2014年05月22日 · 23538 次阅读

在做页面的时候，会在页面上显示别的网站的内容、图片或者视频一类的，我想使用iframe来简单的实现这个功能， 不过在使用以下代码：

HTML代码：

<div ng-show="paragraph.show">
    <span ng-click="addModify(paragraph)" class="glyphicon glyphicon-plus"></span>
</div>
<div ng-show="!paragraph.show">
    <div class="input-group">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-globe" ng-click="addModify(paragraph)"></span>
        </div>
        <input ng-model="paragraph.modifyURL" type="text" class="form-control" placeholder="Please input the URL.">
    </div>
    <div class="">
        <p>{{paragraph.modifyURL}}</p>
        <iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc(paragraph.modifyURL)}}" ></iframe>
    </div>
</div>

JS代码

$scope.trustSrc = (url) ->
  $sce.trustAsResourceUrl(url)

$scope.addModify = (paragraph) ->
  paragraph.show = !paragraph.show

结果当我在input里面输入www.baidu.com的时候， 报错： No route matches [GET] "/show/www.baidu.com"

这个有人知道是为什么，，，

1 个赞
共收到 15 条回复
lyfi2003 #1 · 2014年05月21日

这应该是好使的, 只是你的 URL 写错了:

试试

<iframe width="100%" height="100%" seamless frameborder="0" ng-src="/{{trustSrc(paragraph.modifyURL)}}" ></iframe>

在前 ng-src 前加一个 / 号.

msms #2 · 2014年05月22日

#1楼 @lyfi2003 加一个 / 号会让ng-src无法正确找到input里面输入的值，，，

lyfi2003 #3 · 2014年05月22日

#2楼 @Msms 那就你改到 controller 试试:

$scope.trustSrc = (url) ->
  "/" + $sce.trustAsResourceUrl(url)
msms #4 · 2014年05月22日

#1楼 @lyfi2003 不过用了别的方法可以搞定，从错误信息来看，每次ng-src变化的时候，会向服务器请求这个地址，就在rails里面让服务重新请求一下，，

msms #6 · 2014年05月22日

#3楼 @lyfi2003 不知道为什么非要向服务器请求一次，，，

lyfi2003 #7 · 2014年05月22日

那你把完整的地址加上 http://

msms #9 · 2014年05月22日

#7楼 @lyfi2003 加了之后生成iframe更加诡异了

src标签没有了，，，

<iframe width="100%" height="100%" seamless="" frameborder="0">
<html><head></head><body></body></html>
</iframe>

$scope.trustSrc = (url) ->
  "http://" + $sce.trustAsResourceUrl(url)
lyfi2003 #10 · 2014年05月22日

#9楼 @Msms 加里面试试

msms #11 · 2014年05月22日

#10楼 @lyfi2003 搞定

$scope.trustSrc = (url) ->
  $sce.trustAsResourceUrl("http://" + url)
msms #12 · 2014年05月22日

#10楼 @lyfi2003 可以解释下为什么麼，对angularjs上周末刚开始看，，，

lyfi2003 #13 · 2014年05月22日

#12楼 @Msms URL 首先区分绝对与相对路径, 之前你是相对路径, 访问时加了 /show/xxx, 这肯定不对, 我以为你需要绝对路径, 所以建议你加上 /, 后面发现不是.

你需要的是完整路径, 所以就按最后的方案解决就可以了.

而 trustAsResourceUrl 是 Angularjs 防止用户注入 URL, 而设计的安全需求, 了解即可.

msms #14 · 2014年05月22日

#13楼 @lyfi2003 嗯，学习了，加上 "/" ， 会从网站的根目录请求，加上"http://" 就会请求完整的地址， 以前只有在服务器端考虑相对路径的问题，，， 谢谢！！

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册。
相关话题