为什么我在新打开的窗口中看不到字形图标？答案

【问题标题】：Why I can't see glyphicon icons in new opened window?为什么我在新打开的窗口中看不到字形图标？
【发布时间】：2016-10-14 20:00:12
【问题描述】：

我在 $window.open 命令的帮助下打开新窗口并将 html 内容写入窗口。

这里是 Javascript 代码：

var test = angular.module('test', []);

test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
    $scope.openWindow = function() {
       $window.open('', '_blank', 'width=500,height=400').document.write($("#report").html());
    };}]);

这是我写到新窗口的内容：

<div ng-app="test" id = "report" ng-controller="testController">
 <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<hr/>
    <button ng-click="openWindow()">push!</button>
</div>

这里正在工作fiddle。

问题是我在新打开的窗口中看不到字形图标。

知道为什么我看不到字形图标吗？

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

您的代码中有两个错误。首先，您没有正确包含 css。您应该使用href 属性而不是rel 属性来包含css。其次，您必须使用integrity 键检查是否包含来自外部的引导程序。

正确的包含是这个：

var test = angular.module('test', []);

test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
    $scope.openWindow = function() {
    var content = $("#report").html();

    var html = '<html><head><title>hi</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"></head><body>'+content+'</span></p></body></html>'   

       $window.open('', '_blank', 'width=500,height=400').document.write(html);                         
    };}]);

还有更新的小提琴：http://jsfiddle.net/d8atdw0t/283/

如果您希望引用项目中的样式表，您可以使用http://yoursite.com/page.html?window=true 之类的查询参数加载页面模板，然后在$window 加载时使用查询参数指定网址。

$window.open('http://yoursite.com/page.html?window=true', '_blank', 'width=500,height=400');

根据您将如何加载模板文件（例如从后端），如果存在查询参数，您可以限制加载模板文件。

【讨论】：

谢谢。但是如果我想从我的项目中引用样式表而不是从互联网上呢？

【解决方案2】：

您推送到新窗口的 html 中的链接有误。改用这个

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

更新小提琴here

【讨论】：