Question

我想编写一个脚本，打开当前页面的新选项卡，同时将特定于打印的CSS附加到标题中。到目前为止我的JS / jQuery：

/*jslint browser: true, devel: true */
/*global jQuery */
/*global $ */
$(document).ready(function () {
  'use strict';
  jQuery('#print').click(function (event) {
    event.preventDefault();
    $('head').append('<link rel="stylesheet" type="text/css" href="print.css">');
    return false;
  });
});

这会在当前选项卡中生成具有正确打印样式的页面。但是，当我在window.open("<myCurrentURL>", '_blank');之前使用$('head').append('<link rel="stylesheet" type="text/css" href="print.css">');时，打印CSS不会附加到新标签页。

我正在寻找比Open a new javascript window(.open) along with its CSS styling或window.open Style using css更紧凑的解决方案。如何将此信息传递给新标签？

Answer 1

/*jslint browser: true, devel: true */
/*global jQuery */
/*global $ */
$(document).ready(function () {
  'use strict';
  jQuery('#print').click(function (event) {
    event.preventDefault();
    var childWindow = window.open("<myCurrentURL>", '_blank');
    $(childWindow.document).find("head").append('<link rel="stylesheet" type="text/css" href="print.css">');
    return false;
  });
});

您知道这不适用于跨域调用，除非它遵守CORS。

Answer 2

您可以通过更改策略来实现结果。

当您打开窗口时，传递另一个属性
在您准备好的文档中 - 检查该属性，并在需要时另外检查网址，并在html中附加css。

请注意 - 因为我们坚持这个策略，所以回答了同样的理论策略。如果需要，也可以添加代码。

打印CSS：如何打开当前页面的新选项卡并附加CSS？

2 个答案: