Saya mencoba mengatur src
atribut iframe dari suatu variabel dan saya tidak bisa membuatnya berfungsi ...
Markup:
<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>
pengendali / 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 );
}
}
Dengan kode ini, tidak ada yang dimasukkan ke src
atribut iframe . Itu hanya kosong.
Pembaruan 1:
Saya menyuntikkan $sce
ketergantungan ke AppCtrl dan $ sce.trustUrl () sekarang berfungsi tanpa membuang kesalahan. Namun ia mengembalikan TrustedValueHolderType
yang saya tidak yakin bagaimana menggunakannya untuk memasukkan URL yang sebenarnya. Jenis yang sama dikembalikan apakah saya menggunakan $ sce.trustUrl () di dalam kurung interpolasi dalam atribut src="{{trustUrl(currentProjectUrl))}}"
atau jika saya melakukannya di dalam controller ketika menetapkan nilai currentProjectUrl. Saya bahkan mencobanya dengan keduanya.
Pembaruan 2: Saya menemukan cara mengembalikan url dari dipercayaUrlHolder menggunakan .toString () tetapi ketika saya melakukan itu, ia melemparkan peringatan keamanan ketika saya mencoba meneruskannya ke atribut src.
Pembaruan 3: Ini berfungsi jika saya menggunakan trustAsResourceUrl () di controller dan meneruskannya ke variabel yang digunakan di dalam atribut 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 );
}
Masalah saya tampaknya diselesaikan dengan ini, meskipun saya tidak yakin mengapa.
sumber
trustAsResourceUrl
.trustAsResourceUrl
mengembalikan$sce.RESOURCE_URL
yang diperlukan untukiframe
/objects
sementaratrustAsUrl
mengembalikan$sce.URL
yang merupakan jenis jaminan yang lebih lemah (dan saat ini tidak digunakan sesuai dokumentasi ).Ini adalah
$sce
layanan yang memblokir URL dengan domain eksternal, ini adalah layanan yang menyediakan layanan Pelarian Kontekstual Strict ke AngularJS, untuk mencegah kerentanan keamanan seperti XSS, clickjacking, dll. Diaktifkan secara default di Angular 1.2.Anda dapat menonaktifkannya sepenuhnya, tetapi tidak disarankan
untuk info lebih lanjut https://docs.angularjs.org/api/ng/service/$sce
sumber
dengan cara ini saya ikuti dan itu bekerja untuk saya baik-baik saja, semoga akan bekerja untuk Anda,
di sini trustThisUrl hanya menyaring,
sumber
Harap hapus panggilan untuk
trustSrc
berfungsi dan coba lagi seperti ini. {{trustSrc (currentProject.url)}} ke {{currentProject.url}}. Periksa tautan ini http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=previewTetapi menurut Dokumentasi Angular Js 1.2, Anda harus menulis fungsi untuk mendapatkan
src
url. Lihatlah kode berikut.Sebelum:
Javascript
Html
Tetapi untuk alasan keamanan mereka merekomendasikan metode berikut
Javascript
Html
sumber
ng-src
atausrc
. Sudut 1.2 dan seterusnya, seseorang dapat mengikat hanya satu ekspresisrc
danng-src
dan sarannya adalah untuk mengambil url dari kode menggunakan fungsi, jika diperlukan.pilih templat; iframe controller, ng pembaruan model
index.html
iframe.html
Periksa tautan ini: http://plnkr.co/edit/TGRj2o?p=preview
sumber
Anda juga perlu
$sce.trustAsResourceUrl
atau itu tidak akan membuka situs web di dalam iframe:sumber