无法通过 AngularJS 控制器将 url 加载到 iframe

Posted 2023-03-05

【中文标题】无法通过 AngularJS 控制器将 url 加载到 iframe

【英文标题】：Unable to load url into iframe via AngularJS controller

【发布时间】：2014-08-29 08:55:51

【问题描述】：

我正在尝试通过 AngularJS 将 URL 动态加载到 iframe 中。出于某种原因，我不能如this fiddle 所示。有人可以告诉我我做错了什么吗？为什么我不能绑定到控制器中设置的 URL？代码很小：

<div ng-app ng-controller="LoginController">
    <div>Trying to load  customUrl </div>
    <div><iframe ng-src="trustSrc(customUrl)"  ></iframe></div>
</div>

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

谢谢！

【问题讨论】：

也许你在找什么：***.com/questions/20045150/…

【参考方案1】：

您的代码不起作用的原因是源不受信任。为了使源受信任，您需要将$sce 服务用作recommended in this post。如果你这样做，你最终会得到以下结果：

HTML

<div><iframe ng-src="customUrl"  ></iframe></div>

控制器

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

查看更新的小提琴：http://jsfiddle.net/W4WyL/4/

编辑 - 我原来的答案是删除花括号。这是完全不正确的。 ng-src 中需要花括号，以便实际评估 url。这似乎起作用的原因是因为作为模板一部分的代码是隐式信任的，而变量则不是。也就是说，该 url 绝对无效 - 它只是试图在当前页面内加载变量的名称。希望这将有助于其他尝试删除花括号的人！

【讨论】：

嘿，画了请看这个线程..(***.com/questions/34354726/…