Apply CSS dynamically in Angular app

Question

In my angular application, i load URLs inside an iframe dynamically, i want to apply custom.css to the loaded url once the url is loaded inside an iframe. I have tried it using ng-init with angular-css-injector function in iframe. It works, but the css is not applied. Probably it is getting called in the initial stage. Is there any angular feature to apply the function once the url is loaded in iframe?

Here is the code HTML:

 <iframe frameborder='0' ng-src="{{trustSrc(selected.imgurl)}}" ng-init="applyCSS()"   frameborder="0" allowfullscreen>
</iframe>

App.js:

var routerApp =angular.module('DiginRt', ['ngMaterial','angular.css.injector'])

routerApp.controller('AppCtrl', ['$scope', '$mdSidenav','$sce', 'muppetService', '$timeout','$log', 'cssInjector',function($scope, $mdSidenav,$sce, muppetService, $timeout, $log,cssInjector) {

        $scope.applyCSS = function() {
        cssInjector.add("style.css");
        console.log("loaded css dynamically");

  }

Here is the plunker

do you wanted to inject a style inside iframe content or just on the same page? — Pankaj Parkar, Mar 12 '15 at 14:04

score 0 · Accepted Answer · edited May 23 '17 at 12:16

The thing which you are trying is appending CSS to own page, and appending css do parent document would not be applied to the child document which is created by iframe (Iframe creates child document after src has been loaded into the DOM).

Simply you can not do this. You can dynamically add the style dynamically inside iFrame unless the domain of both be same.(Refer this SO Answers for add url for same domain)

By looking at your code it don't looks like your are trying to load different domain inside iframe on your domain.

Possible work around would be, you could pass one more query parameter inside url & maintain css code on the site which you want to load it inside your iframe on basis of query parameter.(use yepnope.js to load js conditionally)

Apply CSS dynamically in Angular app

1 Answers1