Question

我在$ 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。

问题是我无法在新打开的窗口中看到glyphicon图标。

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

Answer 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加载时使用查询参数指定URL。

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

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

Answer 2

您推送到新窗口的html链接错误。请改用

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

更新了小提琴here

为什么我在新打开的窗口中看不到glyphicon图标？

2 个答案: