在 Angular 应用中动态应用 CSS

Question

在我的 angular 应用程序中，我在 iframe 中动态加载 URL，一旦 url 加载到框架。我已经尝试在 iframe 中使用 ng-init 和 angular-css-injector 函数。它有效，但未应用 css。可能它在初始阶段被调用。在 iframe 中加载 url 后，是否有任何 angular 功能可以应用该功能？

这是代码 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");

  }

这是plunker

Answer 1

您正在尝试的是将 CSS 附加到自己的页面，并且附加 css 父文档不会应用于由 iframe 创建的子文档（iframe 创建子文档在 src 加载到 DOM).

之后

你不能这样做。您可以在 iFrame 中动态添加样式，除非两者的域相同。（请参阅 this SO Answers 以添加 url 相同的域）

通过查看您的代码，您似乎并没有尝试在域中的 iframe 中加载不同的域。

可能的解决方法是，您可以在 url 中再传递一个查询参数，并在要根据查询参数将其加载到 iframe 的网站上维护 css 代码。（使用yepnope.js条件加载js）

在 Angular 应用中动态应用 CSS

Apply CSS dynamically in Angular app

css

url

dynamic

angularjs