如何使用angularjs改变iframe src

How to change iframe src use angularjs

本文关键字：iframe src 改变 angularjs 何使用      更新时间：2023-09-26
<iframe src="{{url}}" width="300" height="600">
                <p>Your browser does not support iframes.</p>
            </iframe>

如何修改iframe src

你还需要$sce.trustAsResourceUrl，否则它不会在iframe内打开网站:

JSFiddle

HTML: 

<div ng-app="myApp" ng-controller="dummy">
    <button ng-click="changeIt()">Change it</button>
    <iframe ng-src="{{url}}" width="300" height="600"></iframe>
</div>

JS: 

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {
    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');
    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);

为什么不把源代码改为ng-src呢?这样，您就可以将src链接到一个变量，并按如下方式更改它:

<iframe ng-src="{{url}}">  <p>Your browser does not support iframes.</p> </iframe>
相关文章：