AngularJS에서 페이지에 iframe을 동적으로 삽입합니다.

AngularJS에서 페이지에 iframe을 동적으로 삽입합니다.

Angular 1.2 페이지에 iframe을 동적으로 삽입하려고 합니다.코드는 다음과 같습니다.

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;
    }.......

그래서 data.html은 유효한 HTML을 가진 문자열입니다.

<iframe ...>

문자열에 div도 포함되어 있습니다.그래서 다음과 같이 보일 수 있습니다.

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

app.jsngSanitize에서 사용합니다.그것이 보여주는 것은 디브(iframe 다음)이지만 iframe 자체는 아닙니다.

jQuery를 사용하면 기본적으로 a.

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

잘 작동합니다...하지만 적절한 각도로 만들려고 노력하는 중입니다.JS.

왜 iframe 뒤의 div들만 전시되고 있는지 아는 사람?

다들 감사합니다.

ngBindHtml표시하기 전에 HTML을 전달합니다.내 생각엔 이게 당신의 아이프레임을 제거하는 이유인 것 같네요

문서에 따르면 이 소스에서 오는 HTML을 완전히 신뢰하는 한 $sce.trustAsHtml을 사용하여 이 검사를 피할 수 있습니다. 신뢰할 수 없는 소스에서 온 iframe은 페이지 방문자에게 불쾌한 일을 할 수 있습니다.

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

조심하세요! :)

당신은 사용해야 합니다.$sceng-bind-html 설명서에 설명된 서비스:

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

예를 보려면 이 플랭크를 참조하십시오.

고심 끝에 I 프레임을 페이지에 동적으로 로드하고 정보를 전달할 수 있는 멋진 설정을 할 수 있었습니다.

저는 이것을 github 프로젝트로 만들었습니다.원시 입력 요소 정보를 전달하기 위한 단일 지시어를 사용하며, 또한 다음을 사용합니다.ngSanatize를 위해$sce.trustAsResourceUrl기능.

여기 라이브 데모가 있습니다.

언급URL : https://stackoverflow.com/questions/20165780/insert-an-iframe-into-page-dynamically-in-angularjs