javascript - schools - php iframe
Cómo establecer un atributo iframe src desde una variable en AngularJS (6)
De esta manera sigo y su trabajo funciona bien para mí, que funcione para ti.
<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
height: iframeHeight * 0.75 + ''px''
}" style="width:100%"></iframe>
aquí trustThisUrl es solo un filtro,
angular.module("app").filter(''trustThisUrl'', ["$sce", function ($sce) {
return function (val) {
return $sce.trustAsResourceUrl(val);
};
}]);
Estoy tratando de establecer el atributo src de un iframe a partir de una variable y no puedo hacer que funcione ...
El marcado:
<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>
controladores / 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 );
}
}
Con este código, nada se inserta en el atributo src de iframe. Es solo en blanco.
Actualización 1: inyecté la dependencia $ sce en AppCtrl y $ sce.trustUrl () ahora funciona sin errores de lanzamiento. Sin embargo, devuelve TrustedValueHolderType que no estoy seguro de cómo usar para insertar una URL real. Se devuelve el mismo tipo si uso $ sce.trustUrl () dentro de las llaves de interpolación en el atributo src="{{trustUrl(currentProjectUrl))}}" o si lo hago dentro del controlador al establecer el valor de currentProjectUrl. Incluso lo intenté con ambos.
Actualización 2: Descubrí cómo devolver la url de trustedUrlHolder usando .toString () pero cuando lo hago, emite la advertencia de seguridad cuando intento pasarla al atributo src.
Actualización 3: Funciona si uso trustAsResourceUrl () en el controlador y lo paso a una variable usada dentro del atributo 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 );
}
Mi problema parece resolverse con esto, aunque no estoy muy seguro de por qué.
Es el servicio $ sce el que bloquea las URL con dominios externos, es un servicio que proporciona servicios de escape contextuales estrictos a AngularJS, para evitar vulnerabilidades de seguridad como XSS, clickjacking, etc. Está habilitado de forma predeterminada en Angular 1.2.
Puedes desactivarlo completamente, pero no es recomendable
angular.module(''myAppWithSceDisabledmyApp'', [])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
para obtener más información https://docs.angularjs.org/api/ng/service/ $ sce
Sospecho que mirando el extracto de que la función trustSrc de trustSrc(currentProject.url) no está definida en el controlador.
trustAsResourceUrl inyectar el servicio $sce en el controlador y trustAsResourceUrl la url allí.
En el controlador:
function AppCtrl($scope, $sce) {
// ...
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}
}
En la plantilla:
<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>
También necesita $sce.trustAsResourceUrl o no abrirá el sitio web dentro del iframe:
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'');
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dummy">
<iframe ng-src="{{url}}" width="300" height="200"></iframe>
<br>
<button ng-click="changeIt()">Change it</button>
</div>
seleccionar plantilla; controlador iframe, actualización del modelo ng
index.html
angularapp.controller(''FieldCtrl'', function ($scope, $sce) {
var iframeclass = '''';
$scope.loadTemplate = function() {
if ($scope.template.length > 0) {
// add iframe classs
iframeclass = $scope.template.split(''.'')[0];
iframe.classList.add(iframeclass);
$scope.activeTemplate = $sce.trustAsResourceUrl($scope.template);
} else {
iframe.classList.remove(iframeclass);
};
};
});
// custom directive
angularapp.directive(''myChange'', function() {
return function(scope, element) {
element.bind(''input'', function() {
// the iframe function
iframe.contentWindow.update({
name: element[0].name,
value: element[0].value
});
});
};
});
iframe.html
window.update = function(data) {
$scope.$apply(function() {
$scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name];
});
};
Compruebe este enlace: http://plnkr.co/edit/TGRj2o?p=preview
trustSrc función call to trustSrc y vuelva a intentarlo de esta forma. {{trustSrc (currentProject.url)}} a {{currentProject.url}}. Consulte este enlace http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview
src url. Echa un vistazo al siguiente código. Antes de:
Javascript
scope.baseUrl = ''page'';
scope.a = 1;
scope.b = 2;
Html
<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"
Pero por razones de seguridad están recomendando el siguiente método.
Javascript
var baseUrl = "page";
scope.getIframeSrc = function() {
// One should think about their particular case and sanitize accordingly
var qs = ["a", "b"].map(function(value, name) {
return encodeURIComponent(name) + "=" +
encodeURIComponent(value);
}).join("&");
// `baseUrl` isn''t exposed to a user''s control, so we don''t have to worry about escaping it.
return baseUrl + "?" + qs;
};
Html
<iframe src="{{getIframeSrc()}}">