AngularJS and IFrame srcdoc

Question

I parsed a bunch of email messages from a server, and I would now like to display them on a webpage. I got their HTML contents and I figured an IFrame was the easiest way to show the emails as they were meant to be shown.

However,

<iframe srcdoc="{{ email.html }}" frameborder="0"></iframe>

Gives me the following AngularJS error:

Error: [$interpolate:interr] Can't interpolate: {{ email.html }}
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

I have been searching for a way to do this, tried disabling $sce as a test, but that didn't work either. It's just a test project and the data I'm getting is safe, I just need it for a POC.

I did this now in my controller:

var iframeDocument = document.querySelector('#myiframe').contentWindow.document;
var content = $scope.email.html;
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();

That works, but I'd still prefer to do it through data-binding, if there's a solution? Thanks.

@dandavis An HTML document containing the actual email contents — Joris Ooms
– Joris Ooms, Commented Jan 9, 2014 at 2:36
trying turning the doc into a string first, eventually setting the srcDoc to the html string. — dandavis
– dandavis, Commented Jan 9, 2014 at 2:38
@dandavis Could you elaborate? The email contents is one large HTML string. I just want to dump the whole email in an IFrame but Angular won't let me. I tried something like this: $('#myiframe').attr('srcdoc', $scope.email.html); but that didn't really work out either. — Joris Ooms
– Joris Ooms, Commented Jan 9, 2014 at 2:51
I'm not 100% sure, but I don't think Angular supports this currently. I believe you'd need to do $scope.emailHtml = $sce.trustAsHtml($scope.email.html), but there is no ng-srcdoc-bind-html which I think is the other piece of this puzzle (checkout ng-bind-html) — Matt Greer
– Matt Greer, Commented Jan 9, 2014 at 2:59
Another possibility is to disable SCE, See this: docs.angularjs.org/api/… — Matt Greer
– Matt Greer, Commented Jan 9, 2014 at 14:24

user219644 · Accepted Answer · 2014-11-20 16:41:45Z

8

Add a filter to make a value trusted:

angular.module('app').filter('toTrusted', ['$sce', function($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

And then apply the filter:

<iframe srcdoc="{{email.html | toTrusted}}" frameborder="0"></iframe>

Complete code: http://jsfiddle.net/2bvktbLr/1/

answered Nov 20, 2014 at 16:41

user219644

891 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MCSI · Accepted Answer · 2014-02-25 18:42:20Z

2

try to add ngSanitize as a dependency in your app.

here your have more information : http://docs.angularjs.org/api/ngSanitize

answered Feb 25, 2014 at 18:42

MCSI

2,92430 silver badges35 bronze badges

1 Comment

Kirk Liemohn Over a year ago

This helped me. I already had angular-sanitize.js referenced from my index.html, but I needed to add it as a dependency: angular.module('app', ['ngSanitize']);

Collectives™ on Stack Overflow

AngularJS and IFrame srcdoc

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related