Próbuję ustawić src
atrybut iframe ze zmiennej i nie mogę go uruchomić ...
Znaczniki:
<div class="col-xs-12" ng-controller="AppCtrl">
<ul class="">
<li ng-repeat="project in projects">
<a ng-click="setProject(project.id)" href="">{{project.url}}</a>
</li>
</ul>
<iframe ng-src="{{trustSrc(currentProject.url)}}">
Something wrong...
</iframe>
</div>
kontrolery / app.js:
function AppCtrl ($scope) {
$scope.projects = {
1 : {
"id" : 1,
"name" : "Mela Sarkar",
"url" : "http://blabla.com",
"description" : "A professional portfolio site for McGill University professor Mela Sarkar."
},
2 : {
"id" : 2,
"name" : "Good Watching",
"url" : "http://goodwatching.com",
"description" : "Weekend experiment to help my mom decide what to watch."
}
};
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
console.log( $scope.currentProject );
}
}
Dzięki temu kodowi nic nie jest wstawiane do src
atrybutu iframe . To jest po prostu puste.
Aktualizacja 1:
wstrzyknąłem $sce
zależność do AppCtrl i $ sce.trustUrl () działa teraz bez zgłaszania błędów. Zwraca jednak informacje, TrustedValueHolderType
których nie jestem pewien, jak wstawić rzeczywisty adres URL. Ten sam typ jest zwracany bez względu na to, czy używam $ sce.trustUrl () wewnątrz nawiasów interpolacyjnych w atrybucie, src="{{trustUrl(currentProjectUrl))}}"
czy robię to wewnątrz kontrolera podczas ustawiania wartości currentProjectUrl. Próbowałem nawet z obydwoma.
Aktualizacja 2: Zorientowałem się, jak zwrócić adres URL z zaufanegoUrlHolder za pomocą .toString (), ale kiedy to robię, wyświetla ostrzeżenie bezpieczeństwa, gdy próbuję przekazać go do atrybutu src.
Aktualizacja 3: Działa, jeśli użyję trustAsResourceUrl () w kontrolerze i przekażę to do zmiennej używanej w atrybucie ng-src:
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
console.log( $scope.currentProject );
console.log( $scope.currentProjectUrl );
}
Wydaje się, że mój problem został przez to rozwiązany, chociaż nie jestem do końca pewien, dlaczego.
źródło
trustAsResourceUrl
.trustAsResourceUrl
zwraca element$sce.RESOURCE_URL
niezbędny doiframe
/objects
podczastrustAsUrl
zwrotu,$sce.URL
który jest słabszym rodzajem gwarancji (i obecnie nie jest używany zgodnie z dokumentacją ).Jest to
$sce
usługa, która blokuje adresy URL z domenami zewnętrznymi, jest to usługa zapewniająca AngularJS ścisłe kontekstowe ucieczkę, aby zapobiec lukom w zabezpieczeniach, takim jak XSS, clickjacking itp., Jest ona domyślnie włączona w Angular 1.2.Możesz go całkowicie wyłączyć, ale nie jest to zalecane
aby uzyskać więcej informacji https://docs.angularjs.org/api/ng/service/$sce
źródło
w ten sposób podążam i jego praca jest dla mnie w porządku, oby to zadziałało dla ciebie,
tutaj trustThisUrl to tylko filtr,
źródło
Usuń połączenie z
trustSrc
funkcją i spróbuj ponownie w ten sposób. {{trustSrc (currentProject.url)}} do {{currentProject.url}}. Sprawdź ten link http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=previewAle zgodnie z dokumentacją Angular Js 1.2 powinieneś napisać funkcję pobierania
src
adresu URL. Spójrz na następujący kod.Przed:
JavaScript
HTML
Ale ze względów bezpieczeństwa zalecają następującą metodę
JavaScript
HTML
źródło
ng-src
lubsrc
. Począwszy od wersji 1.2, można powiązać tylko jedno wyrażenie wsrc
ing-src
zaleca się, aby w razie potrzeby pobrać adres URL z kodu za pomocą funkcji.wybierz szablon; kontroler iframe, aktualizacja modelu
index.html
iframe.html
Sprawdź ten link: http://plnkr.co/edit/TGRj2o?p=preview
źródło
Potrzebujesz także,
$sce.trustAsResourceUrl
bo inaczej nie otworzy strony internetowej w ramce iframe:źródło