Question

在我的角度应用程序中，我动态地在iframe中加载URL，我想在将ifl加载到iframe中后将custom.css应用于加载的URL。我在iframe中使用带有angular-css-injector函数的ng-init尝试了它。它有效，但css未应用。可能它在初始阶段被调用。一旦将URL加载到iframe中，是否有任何角度功能来应用该功能？

这是代码的 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 do父文档将不会应用于由iframe创建的子文档（iframe在src加载到DOM后创建子文档）。

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

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

可能的解决方法是，你可以在url＆amp;中传递一个以上的查询参数。在查询参数的基础上维护要在iframe中加载的网站上的css代码。（使用yepnope.js有条件地加载js）

在Angular应用程序中动态应用CSS

1 个答案: