IFrame In AngularJS

Question

I want to bind iframe in a div that is returning by my database,

<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>

Is this possible to bind in following div

<div ng-app="myApp" ng-controller="dummy">

are you returning it as string? You might need ng-bind-html — Aleksey Solovey
– Aleksey Solovey, Commented May 29, 2018 at 13:31
Yes, I'm returning it as string. I've already tried ng-bind-html but it's not working — Amit Mishra
– Amit Mishra, Commented May 29, 2018 at 13:34
you need to explain why it's not working. Did you inject the ngSanitize module? Have you escaped quotes in your string? Do you have any errors in the console? — Aleksey Solovey
– Aleksey Solovey, Commented May 29, 2018 at 13:37

Protozoid · Accepted Answer · 2018-05-29 13:50:51Z

1

You will need to use the $sce service in conjunction with ng-bind-html in order to parse the string as safe HTML.

If your string is: "<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>"

Then you need to replace the " with apostrophes and then parse it as safe HTML, as such:

dummy.unsafeIframeCode = "<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>";

dummy.unsafeParsedIframeCode = dummy.unsafeIframeCode.replace(/\&quot\;/gi, "'");

dummy.safeIframeCode = $sce.trustAsHtml(dummy.unsafeParsedIframeCode);

And simply bind it in HTML as such:

<div ng-app="myApp" ng-controller="dummy" ng-bind-html="dummy.safeIframeCode">

Full working JSFiddle here

answered May 29, 2018 at 13:50

Protozoid

1,2071 gold badge8 silver badges16 bronze badges

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

1 Comment

Amit Mishra Over a year ago

Thanks a lot Protozoid

chinmayan · Accepted Answer · 2018-05-29 13:42:38Z

0

ng-bind-html willn't work for binding your iFrame, because the sanitizer is protecting your app from potential XSS attacks.

If you trust/control the data source completely, you can look into using trustAsHtml e.g. scope.trustedData = $sce.trustAsHtml(content); in your directive controller(where content is your iFrame "<iframe.../>"), and <div ng-bind-html="trustedData"></div> in the DOM. It'll do the task for you.

answered May 29, 2018 at 13:42

chinmayan

1,38214 silver badges13 bronze badges

Collectives™ on Stack Overflow

IFrame In AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related