如何将样式表粘贴到Rally应用程序中的新文档窗口中

How to paste a style sheet into a new document window in a Rally app

本文关键字：新文档 窗口 文档 应用程序 Rally 样式      更新时间：2023-09-26

我试图使一个集会应用程序，显示用户故事卡，然后弹出打印窗口时按下一个按钮。除了将html粘贴到Rally站点中的Custom 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)，该链接在外部工作。但是，构建应用程序并将其粘贴到自定义HTML中会使所有css内联，从而带走app.css文件。因为我想让那个文件同时格式化应用程序和打印窗口，它不能与内联css一起工作。我尝试使用各种方法复制应用程序的样式节点:

var ourStyle = document.styleSheets[2];
在发现第三个样式表是我想要的样式表后，

。然后我尝试使用

将这个样式表添加到打印窗口的样式表中
doc.styleSheets[2] = ourStyle;

我也试过:

doc.styleSheets.push(ourStyle);

，但这不起作用，因为styleSheets是一个对象，没有push方法。

我不知道如何复制css样式，以便它们可以用于打印窗口，或者如何找到另一种方法来解决这个问题。任何帮助都太棒了!谢谢!

我也知道在html文件中输入所有标签是可能的，但我真的更喜欢一个更简单的解决方案(因为有很多css代码)。

为了同时获得Rally CSS和我放入应用中的CSS，我必须做两件不同的事情。在打开新窗口之前，添加一行:

var css = document.getElementsByTagName('style')[0].innerHTML;

然后，在新文档中写入html时，将该css放在样式标签之间:

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注入到新窗口中。

你可以检查一下

      'http://jsfiddle.net/ni3net/zPhP3/'

it's working fine.

可能是你的标题变量，有一些字符串结束符，如('，"，>，<)

相关文章：