无法通过AngularJS控制器将网址加载到iframe中

一尘不染

无法通过AngularJS控制器将网址加载到iframe中

angularjs

我正在尝试通过AngularJS将URL动态加载到iframe中。由于某种原因，我无法像这个小提琴那样显示。有人可以告诉我我在做什么错吗？为什么不能绑定到控制器中设置的URL？代码很小：

<div ng-app ng-controller="LoginController">
    <div>Trying to load {{ customUrl }}</div>
    <div><iframe ng-src="{{trustSrc(customUrl)}}" height="480" width="640"></iframe></div>
</div>

function LoginController($scope) {
    $scope.customUrl = 'http://www.google.com/custom';
}

谢谢！

阅读 205

2020-07-04

共1个答案

一尘不染

您的代码无法正常工作的原因是因为源不受信任。为了使来源受到信任，您需要使用本文推荐的$sce服务。如果这样做，您将得到以下结果：

HTML

<div><iframe ng-src="{{customUrl}}" height="480" width="640"></iframe></div>

控制者

function LoginController($scope, $sce) {
    $scope.customUrl = $sce.trustAsResourceUrl('http://www.cnn.com');   
}

请参阅更新的小提琴：http :
//jsfiddle.net/W4WyL/4/

编辑 -我原来的回答说要删除花括号。这是完全不正确的。必须使用花括号ng-src才能实际评估网址。之所以 看起来
可行，是因为作为模板一部分的代码是隐式受信任的，而变量则不是。也就是说，该网址绝对无效-
它只是试图在当前页面内加载变量的名称。希望这将对将来尝试删除花括号的其他人有所帮助！

2020-07-04