web-dev-qa-db-fra.com

insérer dynamiquement un iframe dans la page dans AngularJS

J'essaie d'insérer dynamiquement un iframe dans une page avec Angular 1.2. Voici le code:

html:

<div id="player_wrapper" ng-cloak>
    <div ng-bind-html="player"></div>
</div>

js:

$http({method: 'GET', url: url}).
    success(function(data, status) {
        $scope.player = data.html;
    }.......

Ainsi, le data.html est une chaîne qui a un HTML valide commençant par

<iframe ...>

La chaîne contient également quelques div. Cela pourrait donc ressembler à:

<iframe src='...' ...></iframe><div>some stuf</div>

J'utilise dans app.js 'ngSanitize'. Ce qu'il montre est le div (après l'iframe) mais pas l'iframe lui-même.

Si j'utilise jQuery, en gros un

$(#'player_wrapper').html(data.html)

fonctionne bien ... mais en essayant de le rendre angularJS approprié.

Une idée sur pourquoi seuls les divs après l'iframe sont affichés?

Merci beaucoup à tous

angularjsiframeangularjs-directiveng-bind-html
22
user2929613

ngBindHtml passera votre code HTML via $sce.getTrustedHtml avant de l'afficher. Je soupçonne que c'est ce qui supprimerait votre iframe.

Selon les documents vous pouvez utiliser $ sce.trustAsHtml pour éviter cette vérification tant que vous faites entièrement confiance à tout code HTML provenant de cette source - une iframe provenant d'une source non fiable pourrait probablement faire un certain nombre de choses désagréables aux visiteurs de votre page.

$http({method: 'GET', url: url}).
    success(function(data, status) {
        $scope.player = $sce.trustAsHtml(data.html);
    }.......

Faites attention! :)

34
Andyrooger

Vous devez utiliser le service $sce Comme décrit dans le documentation de ng-bind-html :

$scope.player = $sce.trustAsHtml('your html goes here');

Voir ce plunk pour un exemple:

7
lex82

Après beaucoup de problèmes, j'ai réussi à obtenir une configuration Nice où je peux charger dynamiquement des iframes dans ma page et y transmettre des informations.

J'ai fait ça n projet github . Il utilise une seule directive pour transmettre des informations brutes sur les éléments d'entrée, et utilise également ngSanatize pour $sce.trustAsResourceUrl une fonction.

Voici la démo en direct

4
james2doyle