我在 $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 .
问题是我在新打开的窗口中看不到字形图标。
知道为什么我看不到字形图标吗？
最佳答案
您的代码中有两个错误。首先，您没有正确包含 css。您应该使用 href 属性而不是 rel 属性来包含 css。其次，您必须使用 integrity 键检查您是否包含来自外部的 Bootstrap 。
正确的包含是这个:
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);
};}]);
更新后的 fiddle :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');
根据您加载模板文件的方式(例如从后端加载)，如果查询参数存在，您可以限制加载模板文件。
关于javascript - 为什么我在新打开的窗口中看不到字形图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37806040/