如何在Rally应用程序中将样式表粘贴到新的文档窗口中
我正在尝试做一个拉力赛应用程序，显示用户故事卡，然后弹出一个打印窗口，当一个按钮被按下。除了将html粘贴到Rally站点中的自定义HTML应用程序之外，一切都运行得很好。当我尝试这样做时，弹出窗口的格式不正确。CSS不适用于“打印”窗口，这意味着它只打印未格式化的文本。
这个应用程序有以下代码来生成打印窗口：
title = this.iterationCombobox.rawValue + ' Stories';
options = "toolbar=1,menubar=1,scrollbars=yes,scrolling=yes,resizable=yes,width=1000,height=500";
printWindow = window.open('', title, options);
doc = printWindow.document;
cardMarkup = this.down('#card');
doc.write('<html><head><link type="text/css" rel="stylesheet" href="app.css"/><title>' + title + '</title>');
doc.write('</head><body class="landscape">');
doc.write(cardMarkup.getEl().dom.innerHTML);
doc.write('</body></html>');
doc.close();
printWindow.print();这段代码的大部分工作正常，但下面这行代码不能正常工作：
doc.write('<html><head><link type="text/css" rel="stylesheet" href="app.css"/><title>' + title + '</title>');html的链接部分将其链接到css文件(app.css)，此链接在外部工作。但是，构建应用程序然后将其粘贴到Custom HTML中会将所有的css内联，因此会移除app.css文件。因为我想让这个文件同时格式化应用程序和打印窗口，所以它不能与内联css一起工作。我尝试使用各种方法复制应用程序的样式节点：
var ourStyle = document.styleSheets[2];在发现第三个样式表就是我想要的那个之后。然后，我尝试使用以下命令将此样式表添加到打印窗口的样式表中：
doc.styleSheets[2] = ourStyle;我也试过了：
doc.styleSheets.push(ourStyle);但这并不起作用，因为styleSheets是一个对象，并且没有push方法。
我不确定如何复制css样式以便将其用于打印窗口，也不知道如何找到解决此问题的其他方法。任何帮助都是很棒的！谢谢!
此外，我知道可以直接输入html文件中的所有标签，但我真的更喜欢比这更简单的解决方案(因为有很多css代码)。
回答 2
Stack Overflow用户
发布于 2013-06-29 01:36:45
为了获得Rally CSS和我放到应用程序中的CSS，我必须做两件不同的事情。在打开新窗口之前，添加一行：
var css = document.getElementsByTagName('style')[0].innerHTML;然后，在将html写入新文档时，将该css放在style标记之间：
doc.write('<html><head><style>' + css + </style></head>');免责声明！这行不能在外部工作！只有当你在拉力赛现场时，它才能起作用。
为了确保Rally CSS包含在应用程序中，我在代码中添加了以下两个函数：
_injectContent: function(html, elementType, attributes, container, printWindow){
elementType = elementType || 'div';
container = container || printWindow.document.getElementsByTagName('body')[0];
var element = printWindow.document.createElement(elementType);
Ext.Object.each(attributes, function(key, value){
if (key === 'class') {
element.className = value;
} else {
element.setAttribute(key, value);
}
});
if(html){
element.innerHTML = html;
}
return container.appendChild(element);
},
_injectCSS: function(printWindow){
//find all the stylesheets on the current page and inject them into the new page
Ext.each(Ext.query('link'), function(stylesheet){
this._injectContent('', 'link', {
rel: 'stylesheet',
href: stylesheet.href,
type: 'text/css'
}, printWindow.document.getElementsByTagName('head')[0], printWindow);
}, this);
}最后，将下面这一行添加到构建新窗口的函数中：
this._injectCSS(printWindow);这将把Rally CSS注入到新窗口中。
Stack Overflow用户
发布于 2013-06-11 02:31:05
你可以查一下
'http://jsfiddle.net/ni3net/zPhP3/'它工作得很好..
可能是包含字符串终止符的title变量，如('，"，>，<)
https://stackoverflow.com/questions/16823791
复制相似问题
腾讯云开发者
